javascript Onclick 显示阻止为无和无阻止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8523704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onclick Display Block to None and None to Block
提问by Jean Hules
I have this code: CSS:
我有这个代码：CSS：
.hiddenlinks{display: none;}
HTML:
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>
There is a list of similar div ids in a vertical order. What I am trying to do is once "123" is clicked, the divs id under #expand will shift down and the "ABC", "DEF", and "HIJ" will display:block.
有一个按垂直顺序排列的类似 div id 的列表。我想要做的是一旦单击“123”，#expand 下的 div id 将向下移动，“ABC”、“DEF”和“HIJ”将显示：block。
So my question is a two parter:
所以我的问题是两个部分：
- How can i toggle display block and none on click with this html?
- Is there a way to animate the separation of the div id's once .hiddenlinks goes from display:none to display:block. and also when .hiddenlinks goes back to display:none and the div ids close the gap.
- 如何使用此 html 在单击时切换显示块和无显示块？
- 有没有办法动画 div id 的分离一次 .hiddenlinks 从 display:none 到 display:block。并且当 .hiddenlinks 返回 display:none 并且 div id 缩小差距时。
回答by user1706511
<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;
}
i have created a example for you i hope it helps once you click 123 the options drop down to your second question i m not sure but i think if you will have different id divs for each of your hidden link then in .slideToggle(//inside here you can customise how each div is shown\);
我已经为你创建了一个例子我希望它在你点击 123 选项下拉到你的第二个问题我不确定但我想如果你的每个隐藏链接都有不同的 id div 然后在 .slideToggle(//inside在这里您可以自定义每个 div 的显示方式\);
please see
请参见
www.jquery.com
www.jquery.com
also see the example above
另请参阅上面的示例
hope it helps you
希望对你有帮助
