如何用手风琴隐藏/可见元素

Question

我想当手风琴元素是可见的span和img元素显示时，当它不可见时它们不显示。实际上用户点击其中一个元素以显示它img和span添加它以及当用户滑动切换跨度和img隐藏时。

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

JSFiddle

如果我做对了，这就是你需要的（点击链接切换图像和跨度的可见性）

小提琴的代码是：

<ul id="accordion">
<li>
    <div id="firstdiv">Sports
        <img alt="b" src='' width='25' height='25' />
        <br/><span>#20</span>

    </div>
    <ul id="firstul">
        <li><a href="#">Golf</a>
        </li>
    </ul>
</li>
<li>
    <div id="seconddiv">Technology
        <img alt="a" src='' width='25' height='25'>
        <br/><span>#20</span>

    </div>
    <ul id="secondul">
        <li><a href="#">iPhone</a>
        </li>
    </ul>
</li>

$("#accordion > li > div").hide();
$("#accordion > li > #firstul").click(function () {
    $("#accordion > li > #firstdiv").slideToggle(300);
});
$("#accordion > li > #secondul").click(function () {
    $("#accordion > li > #seconddiv").slideToggle(300);
});

希望它对你有所帮助。