如何添加样式：inline-block 而在不更改 Javascript 的情况下打开 ul？

Question

我有一个包含 header 和切换的列表。当前打开 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，因为我不想通过将每个 toggle-on 更改为 display: inline-block 来破坏其他地方的东西。

编辑：toggle-closed class 应该应用于 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>

Answer 2

您可以使用 jQuery 添加 css 而不是调用 show。

 $(toggleClosed).css('display', 'inline-block');

如何添加样式：inline-block 而在不更改 Javascript 的情况下打开 ul？

How to add style: inline-block while a ul being toggled on without changing Javascript?

html

javascript

css

jquery

togglebutton