Question

当我点击任何.show时，我想关闭所有.list并打开我点击的那个。

我已经尝试过了，但它没有按预期工作。

＆＃13;

    $('.show').click(function(){
        $('.list1').toggleClass("displaylist");
    });
    $('.show2').click(function(){
        $('.list2').toggleClass("displaylist");
    });
    $('.show3').click(function(){
        $('.list3').toggleClass("displaylist");
    });

＆＃13;

    .list1, list2,list3{display:none;}
    .displaylist{display:block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="show"></li>
    <div class="list1">
        <select>
            <option></option>
        </select>
    </div>
    <li class="show2">list2</li>
    <div class="list2">
        <select>
            <option></option>
        </select>
    </div>
    <li class="show3"></li>

＆＃13;

Answer 1

如果我理解你的问题，最简单的方法是为每个li和div添加一个相同的类并使用jquery的next()函数

$('.show').click(function(){
  $('.list').hide();
  $(this).next().show();
});

.list
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="show">List 1</li>
<div class="list">
  <select>
    <option></option>
  </select>
</div>

<li class="show">List 2</li>
<div class="list">
  <select>
    <option></option>
  </select>
</div>

<li class="show">List 3</li>
<div class="list">
  <select>
    <option></option>
  </select>
</div>

Answer 2

您的问题有点不清楚，但在使用您提供的代码后，我想我已经找到了您想要的内容。

这是对的吗？ https://jsfiddle.net/u5cqLwk3/

HTML

<li class="show show1">list1</li>
<div class="list list1">
    <select>
        <option></option>
    </select>
</div>
<li class="show show2">list2</li>
<div class="list list2">
    <select>
        <option></option>
    </select>
</div>
<li class="show show3">list3</li>
<div class="list list3">
    <select>
        <option></option>
    </select>
</div>

CSS

.list {display: none}
.displaylist{display:block;}

JS

$('.show').click(function(){
    $('.list').removeClass("displaylist");
});
$('.show1').click(function(){
    $('.list1').addClass("displaylist");
});
$('.show2').click(function(){
    $('.list2').addClass("displaylist");
});
$('.show3').click(function(){
    $('.list3').addClass("displaylist");
});

如果我点击jquery中的其他切换类或元素，将如何关闭活动切换类？

2 个答案: