如何使用不同的選擇器簡化重復的jQuery代碼

Question

因此，我有數百個列表，它們被分為30多個類別。

我要做的是使列表顯示為：無，對於每個類別都具有click.slideToggle（）函數，以及除了單擊列表之外的slideUp其他列表，問題是我必須為每個列表編寫非常長的重復代碼。

我需要有人向我建議一種更好的方式來編寫這些javascript行，因此這里是更清晰圖片的代碼。

<span id='categoryA'>
<div id='listA' class='list'>

<span id='categoryB'>
<div id='listB' class='list'>

<span id='categoryC'>
<div id='listC' class='list'>

<span id='categoryD'>
<div id='listD' class='list'>

<!-- there are around 25 more of similar lists -->

CSS：

.list {
    display: none;
}

JavaScript的：

$(document).ready(function() {
  $("#categoryA").click(function() {
    $("#listA").slideToggle(function() {
      $("#listB,#listC,#listD").slideUp();
    });
  });

   $("#categoryB").click(function() {
    $("#listB").slideToggle(function() {
      $("#listA,#listC,#listD").slideUp();
    });
  });

   $("#categoryC").click(function() {
    $("#listC").slideToggle(function() {
      $("#listA,#listB,#listD").slideUp();
    });
  }); 

   $("#categoryD").click(function() {
    $("#listD").slideToggle(function() {
      $("#listA,#listB,#listC").slideUp();
    });
  });
});

問題的關鍵是我想，每一次#categoryA被點擊，它的slideToggle #listA ，如果我點擊#categoryB ，它的slideToggle #listB和效果基本show任何其他列出目前已了slideDown。

我有30多個類別。 如何使代碼更簡單，更高效？ 有人有更聰明的方法嗎？

Answer 1

<span class='category' id='categoryA'>Title A</span>
<div id='listA' class='list'>...</div>

<span class='category' id='categoryB'>Title B</span>
<div id='listB' class='list'>...</div>

<span class='category' id='categoryC'>Title C</span>
<div id='listC' class='list'>...</div>

<span class='category' id='categoryD'>Title D</span>
<div id='listD' class='list'>...</div>

和

$(function() {
    $(document).on("click", ".category", function () {
        $(this).next(".list").slideToggle(function () {
            $(".list").not(this).slideUp();
        };
    });
});

備注：

• 使用CSS類（而不是HTML ID）將相似的元素分組。 請注意，我的代碼完全不需要ID ，除非真正需要ID ，否則可以將其刪除。
• 這使用事件委托 。
• .not()從jQuery中的列表中排除元素。
• 在this的“完整”的回調里面.slideToggle()是指動畫元素（因此，“完整”的回調每個動畫元素調用一次，畢竟不是選定的元素已經完成滑動-這是要記住，當你動畫在某個時刻有多個元素）

Answer 2

這是一個非常簡單的函數，它使用jQuery.on委托事件，而.next和.not函數用於在用戶單擊觸發器時過濾選擇。

/**
* @param [jQuery] $obj - the jQuery selection we want to accordionize
* @param [Object] opt  - optional settings
* @return [jQuery] $obj
*/
function accordionize($obj, opt){
    opt = $.extend({
        triggers: 'dt',
        content: 'dd'
    }, opt || {});

    // bind the click events to all elements that match our trigger selection
    $obj.on('click', opt.triggers, function(e){
        // Get the associated content element
        var $target = $(this).next(opt.content);
        $target.slideDown(function(){
            $obj.find(opt.content).not($target).slideUp();
        });    
    });
    // Create a custom event to setup accordion.
    // hides all content elements except the first.
    $obj.on('accordionize.reset', function(){
        $obj.find(opt.content).hide().first().show();
    });

    return $obj.trigger('accordionize.reset');
}

它要求您將內容包裝在一個元素中：

<dl class="accordion">
    <dt>Topic One</dt>
    <dd>Ipsum loren</dd>
    <dt>Topic two</dt>
    <dd>Some fun facts about topic two</dd>
    <dt>Topic three</dt>
    <dd>Some fun facts about topic three</dd>
</dl>

<div class="accordion">
    <h3 class="trigger">Topic One</h3>
    <div class="content">Ipsum loren</div>
    <h3 class="trigger">Topic two</h3>
    <div class="content">Some fun facts about topic two</div>
    <h3 class="trigger">Topic three</h3>
    <div class="content">Some fun facts about topic three</div>
</div>

第一個示例使用描述列表 ，該列表非常適合類別列表。

然后像這樣調用函數：

accordionize($('dl.accordion'));
accordionize($('div.accordion'), {
  triggers: '.trigger',
  content: '.content'
});

Answer 3

讓我們使用它。

html :

<span id='A' class="category">
<div id='listA' class='list'>

<span id='B'class="category">
<div id='listB' class='list'>

<span id='C'class="category">
<div id='listC' class='list'>

<span id='D' class="category">
<div id='listD' class='list'>

//there are around 25 more of similar lists//

css :

.list {
    display: none;
}

javascript :

$(document).ready(function() {
  $(".category").click(function(){
      id = jQuery(this).attr("id");
      $(".list").slideUp();
      $("#list"+id).slideToggle();
  });
});

希望這能按預期工作。

Answer 4

我的理解是，每當單擊類別時，相應的列表就會向下滑動，而類別中的其他列表也會向上滑動。 如果是這種情況，那么無論何時單擊任何類別，都可以向上滑動所有列表，僅向下滑動屬於該類別的列表。

$(".category").click(function(){
      $(".list).slideUp();
      $(this).find('.list').slideDown();    
});

Answer 5

您可以嘗試這樣的事情

 $("span").on("click", function(){
  var that = $(this)
  that.slidToggle(function(){
  $("#listA,#listC,#listD").slideUp();});

}）;