手风琴菜单中的隐藏部分

Question

我创建了这个列表，其中包含了一些带有手风琴菜单的信息。

查看列表

我遇到的问题(我对此有点困惑)是，当一个菜单被点击时，例如动物菜单，它的信息就会显示出来。

在此之后，当用户单击“颜色”菜单时，“动物”菜单仍然会打开，但我希望，当每个菜单单击时，前一个菜单关闭，只有新菜单保持打开。非常感谢你指导我解决这个问题。

​

'use strict';


    // search & highlight

    ;( function( $, window, document, undefined )
    {
        var $container = $( '.faq' );
        if( !$container.length ) return true;

        var $input          = $container.find( 'input' ),
            $notfound       = $container.find( '.faq__notfound' ),
            $items          = $container.find( '> ul > li' ),
            $item           = $(),
            itemsIndexed    = [];

        $items.each( function()
        {
            itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );
        });

        $input.on( 'keyup', function( e )
        {
            if( e.keyCode == 13 ) // enter
            {
                $input.trigger( 'blur' );
                return true;
            }

            $items.each( function()
            {
                $item = $( this );
                $item.html( $item.html().replace( /<span class="highlight">([^<]+)<\/span>/gi, '$1' ) );
            });

            var searchVal = $.trim( $input.val() ).toLowerCase();
            if( searchVal.length )
            {
                for( var i in itemsIndexed )
                {
                    $item = $items.eq( i );
                    if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
                        $item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^<]+)?>)', 'gi' ), '<span class="highlight">$&</span>' ) );
                    else
                        $item.addClass( 'is-hidden' );
                }
            }
            else $items.removeClass( 'is-hidden' );

            $notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );
        });
    })( jQuery, window, document );


    // toggling items on title press

    ;( function( $, window, document, undefined )
    {
        $( document ).on( 'click', '.faq h2 a', function( e )
        {
            e.preventDefault();
            $( this ).parents( 'li' ).toggleClass( 'is-active' );
        });
    })( jQuery, window, document );


    // auto-show item content when show results reduces to single

    ;( function( $, window, document, undefined )
    {
        var $container = $( '.faq' );
        if( !$container.length ) return true;

        var $input      = $container.find( 'input' ),
            $items      = $container.find( '> ul > li' ),
            $item       = $();

        $input.on( 'keyup', function()
        {
            $item = $items.not( '.is-hidden' );
            if( $item.length == 1 )
                $item.addClass( 'js--autoshown is-active' );
            else
                $items.filter( '.js--autoshown' ).removeClass( 'js--autoshown is-active' );
        });
    })( jQuery, window, document );

body {
  font-family: Roboto, sans-serif;
  color: #34434b;
  background-color: #fff;
  padding: 5rem 1.25rem;
  direction: rtl;
  text-align: right;
  /* 80 20 */
}

a {
  color: #468FB3;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: 640px;
  /* 960 */
  margin: 0 auto;
}
.container h1 {
  font-size: 42px;
  font-weight: 300;
  color: #5594b3;
  margin-bottom: 40px;
}
.container h1 a:hover, .container h1 a:focus {
  color: #a664b7;
}
.container p {
  line-height: 1.6;
}

.faq input {
  width: 100%;
  height: 60px;
  font-size: 20px;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(52, 67, 75, 0.2);
  display: block;
  padding: 0 20px;
  margin-bottom: 40px;
  -webkit-transition: box-shadow .1s linear;
  transition: box-shadow .1s linear;
}
.faq input::-webkit-input-placeholder, .faq input::-moz-placeholder, .faq input:-ms-input-placeholder {
  color: #a1bdcb !important;
}
.faq input:focus {
  box-shadow: 0px 4px 8px rgba(52, 67, 75, 0.4);
}
.faq .highlight {
  background-color: #f00d77;
}
.faq > ul > li:not(:first-child) {
  border-top: 1px solid #dcebed;
  margin-top: 20px;
  padding-top: 20px;
}
.faq > ul > li.is-hidden {
  display: none;
}
.faq > ul > li h2 {
  font-size: 24px;
  font-weight: 700;
}
.faq > ul > li h2:hover, .faq > ul > li h2:focus {
  color: #a664b7;
}
.faq > ul > li.is-active h2, .faq > ul > li:target h2 {
  color: #a664b7;
}
.faq > ul > li > div {
  display: none;
}
.faq > ul > li.is-active > div, .faq > ul > li:target > div {
  display: block;
  margin-top: 10px;
}

.faq__notfound {
  font-size: 20px;
  font-style: italic;
  display: none;
}
.faq__notfound.is-visible {
  display: block;
}

.container footer {
  color: #a1bdcb;
  margin-top: 40px;
}
.container footer a:hover, .container footer a:focus {
  color: #5594b3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- partial:index.partial.html -->
<div class="container" role="main">

    <h1>LIST</h1>

    <div class="faq">
        <input type="search" value="" placeholder="Type some keywords" />
        <ul>
            <li id="faq-1">
                <h2><a href="#faq-1">Animals</a></h2>
                <div>
                    <p>
                        cat <br>
                        dog <br>
                        lion <br>
                        tiger <br>
                    </p>
                </div>
            </li>
            <li id="faq-2">
                <h2><a href="#faq-2">Names</a></h2>
                <div>
                    <p>
                        jim <br>
                        jack <br>
                        mary <br>
                        tom <br>
                    </p>
                
                </div>
            </li>
            <li id="faq-3">
                <h2><a href="#faq-3">colors</a></h2>
                <div>
                    <p>
                        blue <br>
                        red <br>
                    </p>
                
                </div>
            </li>
            
        </ul>
        <div class="faq__notfound"><p>No matches were found&hellip; Try &ldquo;giza&rdquo;.</p></div>
    </div>

    <footer><p></p></footer>
</div>
<!-- partial -->
<script src='./jquery.min.js'></script><script  src="./script.js"></script>

​

Answer 1

使用此函数代码

;( function( $, window, document, undefined )
{   
    $( document ).on( 'click', '.faq h2 a', function( e )
    {
        e.preventDefault();
        var refId = $(this).parents('li').attr('id'); 
          
        $('li').each(function(){
          if(refId != $(this).attr('id')){

          $( this ).removeClass('is-active');   
          }
        });
        $( this ).parents( 'li' ).toggleClass( 'is-active' );
    });
})( jQuery, window, document );

Answer 2

试试这个，少点代码

$('.faq h2 a').on('click', function(e){
    e.preventDefault();
    $(this).parents('li').toggleClass('is-active').siblings().removeClass('is-active');
});

此外，您还必须从您的css代码(如:target )中删除不必要的样式。

.faq > ul > li.is-active h2, 
.faq > ul > li:target h2 {
  color: #a664b7;
}

.faq > ul > li.is-active > div, 
.faq > ul > li:target > div {
  display: block;
  margin-top: 10px;
}

至

.faq > ul > li.is-active h2 {
  color: #a664b7;
}

.faq > ul > li.is-active > div {
  display: block;
  margin-top: 10px;
}

工作代码：https://codepen.io/vinodmurukesan/pen/zYrMqyJ

Answer 3

请在script.js中替换这个函数，从第57行开始，您将看到神奇的结果。

;( function( $, window, document, undefined )
    {
        $( document ).on( 'click', '.faq h2 a', function( e )
        {
            e.preventDefault();
            $('li').each(function(){

              $( this ).removeClass('is-active');   
            });
            $( this ).parents( 'li' ).toggleClass( 'is-active' );
        });
    })( jQuery, window, document );