javascript - 如何添加样式: inline-block while a ul being toggled on without changing Javascript?

Question

我有一个带有标题和切换的列表。当前ul开启时，样式为display: block；关闭时，样式为 display: none。这是一个片段:

function toggle () {

  var toggleClosed = $(".toggle-closed");
  var toggleOpened = $(".toggle-opened");

  if (!$(toggleClosed).is(":visible")) {
    $(toggleClosed).show();
    $(toggleOpened).hide();
  } else {
    $(toggleClosed).hide();
    $(toggleOpened).show();
  }
}

.form-row-filter {
  background-color: grey;
}
.toggle-opened {
    cursor: pointer;
    display: block;
}
.toggle-closed {
    cursor: pointer;
    display: none;
}
.material-icons {
  margin-right: -4px;
  margin-left: 4px;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="material-icons toggle-opened" onclick="toggle()">&#x25BA; Companies</div>
    <div class="material-icons toggle-closed" onclick="toggle()">&#x25BC; Companies</div>
    <ul class="form-row-filter toggle-closed">
      <li>
        company a
      </li>
      <li>
        company b
      </li>
    </ul>
</div>

我该怎么做:当 ul 关闭时，样式仍然是 display: none;但是当打开时，让 ul 的样式为 display: inline-block?请注意，我不想更改 Javascript，因为我不想通过将每个开关更改为 display: inline-block 来破坏其他地方的内容。

编辑:toggle-closed 类应该应用于 ul 元素，而不是 li 元素。我修改了代码片段以更正此问题。

Answer 1

hacky 方法(我不推荐)是考虑基于样式的选择器以强制显示:

ul[style="display: block;"] {
 display:inline-block!important;
}

完整代码

function toggle () {

  var toggleClosed = $(".toggle-closed");
  var toggleOpened = $(".toggle-opened");

  if (!$(toggleClosed).is(":visible")) {
    $(toggleClosed).show();
    $(toggleOpened).hide();
  } else {
    $(toggleClosed).hide();
    $(toggleOpened).show();
  }
}

.form-row-filter {
  background-color: grey;
}
.toggle-opened {
    cursor: pointer;
    display: block;
}
.toggle-closed {
    cursor: pointer;
    display: none;
}
.material-icons {
  margin-right: -4px;
  margin-left: 4px;
  vertical-align: middle;
}

ul[style="display: block;"].custom-class {
 display:inline-block!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="material-icons toggle-opened" onclick="toggle()">&#x25BA; Companies</div>
    <div class="material-icons toggle-closed" onclick="toggle()">&#x25BC; Companies</div>
    <ul class="form-row-filter toggle-closed custom-class">
      <li >
        company a
      </li>
      <li >
        company b
      </li>
    </ul>
</div>