Question

我有这个代码： CSS：

 .hiddenlinks{display: none;}

HTML：

<div id="expand">

<a href="javascript://" class="business" >123</a>
    <div class="hiddenlinks">
         <a href="/"target="_blank" class="business" style="color:#f36523">ABC</a><br />
         <a href="/"target="_blank" class="business" style="color:#f36523">DEF</a><br />
         <a href="/"target="_blank" class="business" style="color:#f36523">HIJ</a>
    </div>
 </div>

垂直顺序中有一个类似div id的列表。我想要做的是点击“123”后，＃expand下的divs id将向下移动，“ABC”，“DEF”和“HIJ”将显示：block。

所以我的问题是两个人：

如何使用此html切换显示块和无点击？
有没有办法动画div id的分离动画.hiddenlinks从display：none到display：block。当.hiddenlinks返回显示时：无，而且div ids缩小了差距。

Answer 1

http://jsfiddle.net/F5NCt/1/

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><<<< this goes in the header 
</script>
<script>
$(document).ready(function(){
  $(".business").click(function(){
    $(".hiddenlinks").slideToggle();
  });
});
</script>
</head>
<body>

    <div id="expand">

<a href="javascript://" class="business" >123</a>
    <div class="hiddenlinks">
         <a href="/"target="_blank" class="business" style="color:#f36523">ABC</a><br />
         <a href="/"target="_blank" class="business" style="color:#f36523">DEF</a><br />
         <a href="/"target="_blank" class="business" style="color:#f36523">HIJ</a>
    </div>
 </div>
</body>





    .hiddenlinks { 
display:none;
}

我已经为您创建了一个示例，我希望一旦您点击123选项下拉菜单有帮助对于你的第二个问题，我不确定，但我想如果你的每个隐藏链接都有不同的id div，那么在.slideToggle（//在这里你可以自定义每个div的显示方式\）;

请参阅

www.jquery.com

另见上面的例子

希望它可以帮到你

Onclick显示块为无，无阻塞

1 个答案: