javascript - 如何在 Accordion 中隐藏/可见元素

Question

我想当 Accordion 元素可见时 span 和 img 元素显示，当它不可见时不显示。事实上，用户单击其中一个元素以显示它 img 和 span 添加它，当用户滑动切换 span 和 img 时隐藏。

$("#accordion > li > div").click(function(){
 
    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});
 
$('#accordion ul:eq(0)').show();

#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
}
#accordion div {
    display: block;
    background-color: #FF9927;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
}
#accordion ul{
    display: none;
}
#accordion ul li {
    font-weight: normal;
    cursor: auto;
    padding: 0 0 0 7px;
}
#accordion a {
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
    <li>
      <div>Sports <img src='' width='25' height='25'> <br><span>#20</span></div>
        <ul>
            <li><a href="#">Golf</a></li>
        </ul>
    </li>
    <li><div>Technology<img src='' width='25' height='25'> <br><span>#20</span></div>
        <ul>
            <li><a href="#">iPhone</a></li>

        </ul>
    </li>
</ul>

Answer 1

我能理解的是你正在寻找这样的东西

http://jsfiddle.net/L034j1gh/

#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
}
#accordion div {
    display: block;
    background-color: #FF9927;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
}
#accordion ul{
    display: none;
}
#accordion ul li {
    font-weight: normal;
    cursor: auto;
    padding: 0 0 0 7px;
}
#accordion a {
    text-decoration: none;
}
#accordion > li > div>img{
 display:none;   

}

$("#accordion > li > div").click(function(){

    if(false == $(this).next().is(':visible')) {
          $(this).children('img').show();
        $('#accordion ul').slideUp(300);
    }
    else
    {
         $(this).children('img').hide();
    }
    $(this).next().slideToggle(300);

});

$('#accordion ul:eq(0)').show();
$('#accordion > li:first-child > div>img').show();

<ul id="accordion">
    <li>
      <div>Sports <img src='' width='25' height='25'> <br><span>#20</span></div>
        <ul>
            <li><a href="#">Golf</a></li>
        </ul>
    </li>
    <li><div>Technology<img src='' width='25' height='25'> <br><span>#20</span></div>
        <ul>
            <li><a href="#">iPhone</a></li>

        </ul>
    </li>
</ul>