0

我正在尝试创建一个 Tumblr 主题，当您单击 + 号时，链接和帖子信息会滑入其中。（我的测试博客位于http://noitsnotitsnotokay.tumblr.com/）

我是 JavaScript 的初学者，但我能够使用以下代码为链接菜单解决问题：

<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>

<script>
$("ul.lks").hide();
$("span.btn").click(function () {
  $("ul.lks").slideToggle("slow");
});
</script>

但我也有一段代码适用于所有帖子，用于发布信息。我使用了几乎相同的代码，但是，正如您可能看到的，它多次滑入和滑出。

<div class="pstinfo">
    <!-- info is here -->
</div>
<span class="plsign">+</span>

<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
  $("div.pstinfo").slideToggle("slow");
});
</script>

按钮的顺序和我在 JavaScript 中命名类的方式似乎没有太大变化……有什么提示吗？

4

2 回答 2

1

如果您不想在单击“.plsign”时打开所有“.pstinfo”元素，只打开相关元素，请尝试以下代码：

HTML：

 <div class='parentContainer'> <!--put your elements in a parent Container -->
        <div class='info'>
            Info 1
        </div>   
        <div class='plsign'>
            + Open
        </div> 
    </div> 
    <div class='parentContainer'>
        <div class='info'>
            Info 2
        </div>   
        <div class='plsign'>
            + Open
        </div> 
    </div> 
    <div class='parentContainer'>
        <div class='info'>
            Info 3
        </div>   
        <div class='plsign'>
            + Open
        </div> 
    </div>

JS：

$(".plsign").on('click',function () 
 {   
    $(this).parent().find('.info').slideToggle("slow");
 });

链接到jsFiddle

于 2013-08-12T13:49:06.203 回答
0

代码块 01

<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>

<script>
$("ul.lks").hide();
$("span.btn").click(function () {
  $("ul.lks").stop().slideToggle("slow");
});
</script>

代码块 02

<div class="pstinfo">
    <!-- info is here -->
</div>
<span class="plsign">+</span>

<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
  $("div.pstinfo").stop().slideToggle("slow");
});
</script>

试试这个代码并更新结果:)

于 2013-08-12T13:23:51.390 回答