Question

如何将以下jQuery点击事件简化为一个？它实际上是一个像手风琴一样的下拉菜单。单击一个选项卡时，另一个选项卡会展开。

＆＃13;

$('.areazone .title').click(function(){
    $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    if($('.amenities .title').next().is(':visible')){
        $('.amenities .title').toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    }
});

$('.amenities .title').click(function(){
    $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    if($('.areazone .title').next().is(':visible')){
        $('.areazone .title').toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="areazone">
    <div class="title">Area Zone</div>
    <ul>
        <li><label><input class="area-checkbox" id="robertsonquay" type="checkbox" name="robertsonquay"/>Robertson Quay</label></li>
        <li><label><input class="area-checkbox" id="orchardbelt" type="checkbox" name="orchardbelt">Orchard Belt</label></li>
        <li><label><input class="area-checkbox" id="clarkequay" type="checkbox" name="clarkequay">Clarke Quay</label></li>
        <li><label><input class="area-checkbox" id="cbd" type="checkbox" name="cbd">Central Business District</label></li>
        <li><label><input class="area-checkbox" id="boatquay" type="checkbox" name="boatquay">Boat Quay</label></li>
        <li><label><input class="area-checkbox" id="civicdistrict" type="checkbox" name="civicdistrict">Civic District</label></li>
    </ul>
</div>
<div class="amenities">
    <div class="title">Amenities</div>
    <ul>
        <li><label><input type="checkbox" class="am-checkbox" id="shopping" name="shopping">Shopping Malls</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="museum" name="museum">Museums &amp; Galleries</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="work" name="work">Work</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="education" name="education">Education</label></li>
    </ul>
</div>

＆＃13;

Answer 1

以下是单个子句版本：

$('.amenities .title','.areazone .title').click(function(){
  var selector = '.amenities .title'
  if $(this).hasClass('amenities') {selector = '.areazone .title'}
  $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    if($(selector).next().is(':visible')){
        $(selector).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
   }
});

Answer 2

尝试这种方式：

＆＃13;

$('.title').click(function(){
    $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    var cl;
    if($(this).hasClass( "amenities" )){
    cl = ".amenities";
    }
    else{
    cl = ".areazone";
    }
    if($(cl + ' .title').next().is(':visible')){
        $(cl + '.title').toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    }
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="areazone">
    <div class="title">Area Zone</div>
    <ul>
        <li><label><input class="area-checkbox" id="robertsonquay" type="checkbox" name="robertsonquay"/>Robertson Quay</label></li>
        <li><label><input class="area-checkbox" id="orchardbelt" type="checkbox" name="orchardbelt">Orchard Belt</label></li>
        <li><label><input class="area-checkbox" id="clarkequay" type="checkbox" name="clarkequay">Clarke Quay</label></li>
        <li><label><input class="area-checkbox" id="cbd" type="checkbox" name="cbd">Central Business District</label></li>
        <li><label><input class="area-checkbox" id="boatquay" type="checkbox" name="boatquay">Boat Quay</label></li>
        <li><label><input class="area-checkbox" id="civicdistrict" type="checkbox" name="civicdistrict">Civic District</label></li>
    </ul>
</div>
<div class="amenities">
    <div class="title">Amenities</div>
    <ul>
        <li><label><input type="checkbox" class="am-checkbox" id="shopping" name="shopping">Shopping Malls</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="museum" name="museum">Museums &amp; Galleries</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="work" name="work">Work</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="education" name="education">Education</label></li>
    </ul>
</div>

＆＃13;

Answer 3

您可以删除其中一个css类以定位通用标题div

$('div > div.title').click(function() {
    // your code for both...
});

Answer 4

.title + ul{

      display:none;
    }  



<div class="areazone">
        <div class="title">Area Zone</div>
        <ul>
            <li><label><input class="area-checkbox" id="robertsonquay" type="checkbox" name="robertsonquay"/>Robertson Quay</label></li>
            <li><label><input class="area-checkbox" id="orchardbelt" type="checkbox" name="orchardbelt">Orchard Belt</label></li>
            <li><label><input class="area-checkbox" id="clarkequay" type="checkbox" name="clarkequay">Clarke Quay</label></li>
            <li><label><input class="area-checkbox" id="cbd" type="checkbox" name="cbd">Central Business District</label></li>
            <li><label><input class="area-checkbox" id="boatquay" type="checkbox" name="boatquay">Boat Quay</label></li>
            <li><label><input class="area-checkbox" id="civicdistrict" type="checkbox" name="civicdistrict">Civic District</label></li>
        </ul>
    </div>
    <div class="amenities">
        <div class="title">Amenities</div>
        <ul>
            <li><label><input type="checkbox" class="am-checkbox" id="shopping" name="shopping">Shopping Malls</label></li>
            <li><label><input type="checkbox" class="am-checkbox" id="museum" name="museum">Museums &amp; Galleries</label></li>
            <li><label><input type="checkbox" class="am-checkbox" id="work" name="work">Work</label></li>
            <li><label><input type="checkbox" class="am-checkbox" id="education" name="education">Education</label></li>
        </ul>
    </div>







$('.title').click(function(){
    $(this).next('ul').slideToggle();
    $(this).parent().siblings().find('ul').slideUp()
 });

fiddler链接是https://jsfiddle.net/e4xeqy8k/7/

Answer 5

您可以通过将列表元素中的标题/内容分组来设计手风琴。这简化了逻辑。

我将您的逻辑与此答案相结合，并将其转换为jQueryplugin，以便于重复使用。

Open one tab at a time in accordion

＆＃13;

(function($) {
  $.fn.accordion = function(options) {
    var opts = $.extend({
      delay: 250,
      selector: 'div'
    }, options || {});
    var $this = $(this).find('li').find(opts.selector).click(function() {
      $(this).toggleClass('active').next('div').slideToggle(opts.delay)
        .closest('li').siblings().find(opts.selector).removeClass('active').next('div').slideUp(opts.delay);
    });
  };
})(jQuery);

$('.accordion').accordion({
  selector: '.title' // Optional
});

＆＃13;

input[type="checkbox"] {
  margin-right: 0.5em;
}
.accordion {
  margin: 0;
  padding: 0;
}
.accordion>li {
  display: block;
  list-style: none;
}
.accordion>li>.title {
  display: block;
  color: #FFF;
  margin: 4px 0;
  padding: 6px;
  background: #777;
  cursor: pointer;
  font-size: 1.125em
}
.accordion>li>div {
  display: none;
  overflow: auto
}
.accordion>ul li {
  cursor: auto;
}
.accordion li>.title:hover {
  background: #444;
}
.accordion li>.title.active {
  background: #000;
}
.accordion li div > ul {
	list-style: none;
  padding-left: 1em;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li class="areazone">
    <div class="title">Area Zone</div>
    <div>
      <ul>
        <li><label><input class="area-checkbox" id="robertsonquay" type="checkbox" name="robertsonquay"/>Robertson Quay</label></li>
        <li><label><input class="area-checkbox" id="orchardbelt" type="checkbox" name="orchardbelt">Orchard Belt</label></li>
        <li><label><input class="area-checkbox" id="clarkequay" type="checkbox" name="clarkequay">Clarke Quay</label></li>
        <li><label><input class="area-checkbox" id="cbd" type="checkbox" name="cbd">Central Business District</label></li>
        <li><label><input class="area-checkbox" id="boatquay" type="checkbox" name="boatquay">Boat Quay</label></li>
        <li><label><input class="area-checkbox" id="civicdistrict" type="checkbox" name="civicdistrict">Civic District</label></li>
      </ul>
    </div>
  </li>
  <li class="amenities">
    <div class="title">Amenities</div>
    <div>
      <ul>
        <li><label><input type="checkbox" class="am-checkbox" id="shopping" name="shopping">Shopping Malls</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="museum" name="museum">Museums &amp; Galleries</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="work" name="work">Work</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="education" name="education">Education</label></li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

简化两个jquery点击功能

5 个答案: