Question

我在我的网络应用程序中使用了jQuery的slideToggle()函数。

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle();
    });
});

HTML部分是

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

我的网络应用包含许多必须为slideToggled的元素。我只想编写一次JavaScript函数，并在每次需要实现slideToggle时调用它。我该怎么办呢？

Answer 1

为项目提供一个类，例如数据属性，然后就可以了

 $(function(){
    $(".flip").on("click",function(){
      $("#"+$(this).data("panelId")).slideToggle();
    });
 });

使用

<div class="flip" data-panelId="panel1">Click to slide the panel 1 down or up</div>
<div id="panel1">Hello world!</div>

<div class="flip" data-panelId="panel2">Click to slide the panel 2 down or up</div>
<div id="panel2">Hello world!</div>

如果要切换的项目始终是下一个，则代码为

Live Demo

 $(function(){
    $(".flip").on("click",function(){
      $(this).next().slideToggle();
    });
 });

使用这个HTML我给面板一个类，所以我可以在使用.panel { display:none; }加载页面时隐藏它们

<div class="flip">Click to slide the panel 1 down or up</div>
<div class="panel">Hello world 1</div>

<div class="flip">Click to slide the panel 2 down or up</div>
<div class="panel">Hello world 2</div>

Answer 2

您可以使用某个用于滑动元素的类。让我们说

<div class="sliding otherclass">Text</div>
<span>Some text</span>
<ul class="sliding">
   <li>List one</li>
   <li>List two</li>
</ul>

<button>Show Them</button>

现在使用

$('.sliding').click(function () {
   $(this).slideToggle();
})

这样，每个具有类滑动的元素都将被切换，其他元素将保持原样！将应用每个类，但只有在单击类sliding时才会运行该函数。并且该函数仅对当前元素运行，而不对其他元素运行。

要查看它们，请使用：

$('button').click(function () {
   $('.sliding').slideDown();
})

http://jsfiddle.net/afzaal_ahmad_zeeshan/BC6T3/3/

这是一个小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/BC6T3/1/

可重用的Javascript组件

2 个答案: