Question

当我点击不同手风琴元素的不同链接时，内容会显示在上一个

下方

$('.accordion').on('click', '.accordion-control', function(e){ 
  e.preventDefault();                    // Prevent default action of button
  $(this)                                // Get the element the user clicked on
    .next('.accordion-panel')            // Select following panel 
    .not(':animated')                    // If it is not currently animating
    .slideToggle();                      // Use slide toggle to show or hide it
});




$('.tab-list').each(function(){                   // Find lists of tabs
  var $this = $(this);                            // Store this list
  var $tab = $this.find('li.active');             // Get the active list item
  var $link = $tab.find('a');                     // Get link from active tab
  var $panel = $($link.attr('href'));             // Get active panel

  $this.on('click', '.tab-control', function(e) { // When click on a tab
    e.preventDefault();                           // Prevent link behavior
    var $link = $(this),                          // Store the current link
        id = this.hash;                           // Get href of clicked tab 

    if (id && !$link.is('.active')) {             // If not currently active
      $panel.removeClass('active');               // Make panel inactive
      $tab.removeClass('active');                 // Make tab inactive

      $panel = $(id).addClass('active');          // Make new panel active
      $tab = $link.parent().addClass('active');   // Make new tab active 
    }
  });
});

当我点击不同手风琴元素的不同链接时，内容会显示在上一个

下方

/**********  ACCORDION **********/
.accordion, .menu {
  background-color: #f2f2f2;
  color: #666;
  margin: 0;
  padding: 0;
  overflow: auto;}

.accordion li {
  padding: 0;
  list-style-type: none;}

.accordion-control {
  background-color: rgba(0,0,0,0);
  color: red;
  display: block;
  width: 100%;
  padding: 0.5em 0.5em 0.5em 0.7em;
  margin: 0;
}

.accordion-panel {
  display: none;
}

.accordion-panel p {
  margin: 20px;
}

.accordion-panel img {
  display: block;
  clear: left;
}



/*************** Panels ***************/
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

如何让之前的内容消失？

      <ul class="accordion">
        <li class="active"><a class="tab-control" href="#tab-0">Misc Features</a></li>
        <li>
          <button class="accordion-control">Armory</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-1">S grade</a></li>
              <li><a class="tab-control" href="#tab-2">A grade</a></li>
              <li><a class="tab-control" href="#tab-3">B grade</a></li>
              <li><a class="tab-control" href="#tab-4">C grade</a></li>
            </ul>
          </div>
        </li>
        <li>
          <button class="accordion-control">Weaponry</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-5">Special Ability</a></li>
            </ul>
          </div>
        </li>
        <li>
          <button class="accordion-control">Jewelry</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-6">Raid Boss Jewelry</a></li>
            </ul>
          </div>
        </li>
      </ul>


        <div class="content"> <!-- Content -->
      <div class="tab-panel active" id="tab-0">misc features</div>
            <div class="tab-panel" id="tab-1">armor S</div>
            <div class="tab-panel" id="tab-2">armor A</div>
            <div class="tab-panel" id="tab-3">armor B</div>
            <div class="tab-panel" id="tab-4">armor C</div>
            <div class="tab-panel" id="tab-5">weapon SA</div>
            <div class="tab-panel" id="tab-6">RB jewelry</div>
        </div>

Answer 1

以下是如何执行此操作的方法：

$('.accordion .accordion-panel').not(this).slideUp();
$(this)                                  // Get the element the user clicked on
    .next('.accordion-panel')            // Select following panel 
    .not(':animated')                    // If it is not currently animating
    .slideToggle();                      // Use slide toggle to show or hide it

这是demo。

参考：jQuery: exclude $(this) from selector

accordion + tab =以前的内容不会消失

1 个答案: