如何按类选择单击元素的子元素

how to select the children of clicked element by class

本文关键字：元素 单击 何按类 选择      更新时间：2023-09-26

在我的html页面中，有一个所有类别的列表。每个类别都有一些子类别。我希望在单击列表项时，切换其子类别，即如果它们可见，则应隐藏它们，反之亦然。同时，只有一个列表项能够显示其子类别。我试过这个答案，但无济于事。我不介意使用JS、JQuery等，也不介意完全更改语法。到目前为止，我的工作是

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

css

li {
    margin-bottom: 8px;
   }
 .inner-list {
    margin-top: 10px;
    display: none;
 }

编写脚本

$('.outer-list-element').click(function () {
    $(this).children().toggle();
})

$(".outer-list").click(function() {
$(this).siblings('.inner-list').toggle();
return false;
});

请随时更新此小提琴https://jsfiddle.net/7vmtd2px/1/

请尝试以下代码。

$('.outer-list').click(function () {
   //Hide other ul
   $('ul .inner-list').not($(this).parent('li').find('ul')).hide();
   //Toggle clicked ul
   $(this).parent('li').find('ul').toggle();
});
li {
  margin-bottom: 8px;
}
.inner-list {
  margin-top: 10px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 1</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 2</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#"> sub category 2</a></li>
            </ul>
        </li>
        <li class ="outer-list-element">
            <a href="#" class="outer-list">category 3</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
</ul>

您可以创建一个具有display:block属性的类（在本例中为showInnerList）。因此，在单击元素时，您可以将这个类添加到要显示的DOM中。

此外，我正在使用addClass&removeClass而不是切换。原因是在点击任何DOM时，我打算找到具有showInnerClass的元素，并从中删除同一个类&然后将这个相同的类添加到同级

HTML

<ul class="myList">
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 1</a>
    <ul class="inner-list" id="inner-list">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#">sub category 2</a></li>
    </ul>
  </li>
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 2</a>
    <ul class="inner-list" id="inner-list_1">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#"> sub category 2</a></li>
    </ul>
  </li>
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 3</a>
    <ul class="inner-list" id="inner-list_2">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#">sub category 2</a></li>
    </ul>
  </li>
</ul>

JS-

$('.outer-list-element a').click(function() {
  $('.myList').find('ul.showInnerList').removeClass('showInnerList');
  $(this).next('ul.inner-list').addClass('showInnerList');
})

另外请注意，ul class="inner-list"使用相同的id。id需要是唯一的

JSFIDDLE

try使用此。。

$(document).on('click', ".outer-list", function() {
        $('.inner-list').hide(); //first hide all the element having class inner-list
        //$(this).siblings('.inner-list').toggle();
        $(this).next('ul').toggle(); // here is the trick
        return false;
});

这是FIDDLE

感谢Mohit

这与Sarath的答案相同，但具有额外的功能，即如果单击两次，将自动折叠当前列表。

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 2</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#"> sub category 2</a></li>
        </ul>
    </li>
    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
</ul>

CSS：

li {
    margin-bottom: 8px;
}
.inner-list {
    margin-top: 10px;
    display: none;
}

jQuery:

$(document).on('click', ".outer-list", function() 
{
    $(this).parents().siblings().children(".inner-list").hide();
    $(this).siblings('.inner-list').toggle();
});

这是jsFiddle，以防您想看到它的实际应用。

相关文章：