Question

我想使用jQuery显示UL中具有 .active 类的所有元素。

我的代码会是这样的吗？

if ($(this).hasClass('active')) {
      $( ".active" ).show();
    }

我的HTML标记

<ul>
    <li><a>Menu item 1</a></li>
    <li class="active"><a>Menu item 2</a>
        <ul>
            <li><a>Menu item 2.1</a></li>
            <li class="active"><a>Menu item 2.2</a>
                <ul>
                    <li><a>Menu item 2.2.1</a></li>
                    <li class="active"><a>Menu item 2.2.2</a></li>
                    <li><a>Menu item 2.2.3</a></li>
                </ul>
            </li>
            <li><a>Menu item 2.3</a></li>
        </ul>
    </li>
    <li><a>Menu item 3</a></li>
</ul>

我的CSS

ul li ul 
    {
        display: none;
        overflow: hidden;
    }

Answer 1

可能更容易：

$( "ul .active" ).show()

Answer 2

您不需要明确检查您的元素是否具有活动类，只需执行此操作：

$('ul .active').show();

这将在ul中查找具有活动类的任何元素并将显示它

Answer 3

遍历您的<li>并仅显示active类：

<button onclick="init();">Test</button>
<script type="text/javascript">
    function init() {
        $('li').each(function () {
            if ($(this).hasClass('active')) 
                $(this).show();
            else $(this).hide();
        })
    }
</script>

Answer 4

在您的示例中，代码为

if ($(this).hasClass('active')) {
  $(this).show();
}

但我会直接针对它：

$("ul .active").show();

Answer 5

其他答案似乎错过了，您不仅需要显示隐藏的.active，还需要显示其中包含的隐藏ul。您可以在选择器中使用逗号同时执行这两个操作：

$("li.active ul, li.active").show();

或者，将其进一步限制为ul：

中包含的内容

$("ul li.active ul, ul li.active").show();

5月（或可能不会，取决于其他css如何呈现网页）值得同时删除overflow:hidden .css("overflow", "auto")或类似内容。

Answer 6

<script src="../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            showOrHideMenu();
        });

        function showOrHideMenu() {
            $('#ulMainMenu li').hide();
            $('#ulMainMenu li.active').show();
        };
</script>


<ul id="ulMainMenu">
    <li><a>Menu item 1</a></li>
    ...
</ul>

jQuery显示具有特定类的元素

6 个答案: