如何为＆＃34;嵌套＆＃34;添加活动状态手风琴

时间：2016-08-27 15:05:32

标签： javascript jquery html accordion

我发现这款高效实用的嵌套手风琴使用了＆＃39; ul＆＃39;在codepen这里：https://codepen.io/brenden/pen/Kwbpyj

如下：

＆＃13;
＆＃13; 
$('.toggle').click(function(e) {
  	e.preventDefault();
  
    var $this = $(this);
  
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});
＆＃13; 
url('http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.active {
  text-decoration: underline !important;
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.1em;
  margin: 1em 0;
}
.description {
  margin: 1em auto 2.25em;
}
body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}
h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}
ul {
  list-style: none;
  padding: 0;
}
ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}
ul .inner.show {
  /*display: block;*/
}
ul li {
  margin: .5em 0;
}
ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}
ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>A Cool Accordion</h1>

<p class="description">
  You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you'll lose the animation.
</p>

<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Open Inner</a>
        <div class="inner">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
            blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
          </p>
        </div>
      </li>
      
      <li>
        <a href="#" class="toggle">Open Inner #2</a>
        <div class="inner">
          <p>
            Children will automatically close upon closing its parent.
          </p>
        </div>
      </li>
      
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Item 4</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
              </p>
            </div>
          </li>
        </ul>
      </li>
      
      <li>Option 2</li>
      
      <li>Option 3</li>
    </ul>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

但它并没有通过添加例如＆＃39; .active＆＃39;来支持活动状态。打开标题的课程。

另请参阅＆＃34;项目3＆＃34;。当您点击嵌套＆＃39; a＆＃39;时，＆＃39; .active＆＃39;一类＆＃39; a＆＃39;在活跃的＆＃39;里面父母被删除。这里的重点是，当我点击嵌套的＆＃39; a＆＃39;？

时，我怎样才能让它们保持活动状态

你能帮我做那个吗？

2 个答案:

答案 0 :(得分：0)

检查以下代码。

Jquery ：

 $('.toggle').click(function(e) { e.preventDefault();        
  var $this = $(this);  
  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.parent().find('.active').removeClass('active')    
    $this.next().slideUp(350);
   } else {
    $this.parent().parent().find('.active').removeClass('active');       
    $this.parent('ul').find('.active').removeClass('active')
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.toggleClass('active');      
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
}
});

<强> CSS 

.active{
 background-color :blue !important;
}

它在标记中添加活动类：

<a class="toggle active" href="javascript:void(0);">Item 1</a>

答案 1 :(得分：0)

这里我更新了我的答案，因为你对我的答案做了评论，请查看。

＆＃13;
＆＃13; 
$('.toggle').click(function(e) {
  	e.preventDefault();
  
var $this = $(this);
 
if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
  
    /* JUST ADD HERE CLASS .ACTIVE */
    $this.removeClass("active");

    $this.next().slideUp(350);
} else {
    $this.parent().parent().find('li .inner').removeClass('show');
   
    if($this.hasClass('parent')){
    
    	/* JUST REMOVING HERE CLASS .ACTIVE FROM EARLY APPLIED */
      
      $this.parents(".accordion").find(".toggle").removeClass("active");        	
      
				}else if($this.hasClass('child')){
    
    	/* JUST REMOVING HERE CLASS .ACTIVE FROM EARLY APPLIED FOR CHILD */
    	$this.parents(".accordion").find(".toggle.child").removeClass("active");
      
				}else{
    
    	/* JUST REMOVING HERE CLASS .ACTIVE FROM EARLY APPLIED FOR CHILD OF CHILD */
    	$this.parents(".accordion").find(".toggle.child-child").removeClass("active");
      
				}
  
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    
    /* JUST ADD HERE CLASS .ACTIVE */
    $this.addClass("active");      
    $this.next().slideToggle(350);
}
});
＆＃13; 
url('http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.active {
  text-decoration: underline !important;
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.1em;
  margin: 1em 0;
}
.description {
  margin: 1em auto 2.25em;
}
body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}
h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}
ul {
  list-style: none;
  padding: 0;
}
ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}
ul .inner.show {
  /*display: block;*/
}
ul li {
  margin: .5em 0;
}
ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}
ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

ul li a.toggle.active{
  background: blue;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>A Cool Accordion</h1>

<p class="description">
  You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you'll lose the animation.
</p>

<ul class="accordion">
  <li>
    <a class="toggle parent" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle parent" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle parent" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle child">Open Inner</a>
        <div class="inner">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
            blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
          </p>
        </div>
      </li>
      
      <li>
        <a href="#" class="toggle child">Open Inner #2</a>
        <div class="inner">
          <p>
            Children will automatically close upon closing its parent.
          </p>
        </div>
      </li>
      
      <li>Option 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle parent" href="javascript:void(0);">Item 4</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle child">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle child-child">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
              </p>
            </div>
          </li>
        </ul>
      </li>
      
      <li>Option 2</li>
      
      <li>Option 3</li>
    </ul>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

这是演示

JSFIDDLE DEMO

相关问题
最新问题