Question

frist检查这个http://jsfiddle.net/jQFWM ..这是完美的。但我不想

$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel-1").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

    $(".btn-slide2").click(function(){
        $("#panel-2").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });  
    $(".btn-slide3").click(function(){
        $("#panel-3").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });  
});

这样写。因为我不想一次又一次地重复相同的代码。同样在未来这个面板和触发将是动态的，所以它将超过3.所以在我的脑海中，如果我可以通过拨打电话号码，如1,2,3等触发，那么我猜猜代码会很小。那么伙计们怎么样？比如$（“＃panel + number”）

http://jsfiddle.net/jQFWM/1这是一个简短的代码，但无效。

Answer 1

这就是我要做的事情：

JS：

$(".combtn a").click(function (e) {
    e.preventDefault();
    $("#panel-" + $(this).data('panel')).slideToggle("slow");
    $(this).toggleClass("active");
});

$('.btn-slide').click(function (e) {
    e.preventDefault();
    $(this).closest('.panbox').slideToggle("slow");
    $(".combtn a").removeClass("active");
});

HTML：

<div class="combtn"><a href="#" data-panel="1">panel 1</a>
<div class="combtn"><a href="#" data-panel="2">panel 2</a>
<div class="combtn"><a href="#" data-panel="3">panel 3</a>

小组关闭：

<a href="#" class="btn-slide">close</a>

这使用data-*属性来存储面板编号。我还简化了类，这样您就不必为添加的每个面板添加额外的事件或类名。

这里有效：http://jsfiddle.net/jQFWM/2/

Answer 2

此解决方案不需要ID或数字链接。元素与父子相关，而不是硬编码ID。

<强> Demo

HTML：

<div class="combtn"><a href="#" class="btn-slide">panel 1</a>
    <div id="panel-1" class="panbox"> testing panle 1
      <p><a href="#" class="btn-slide close">close</a></p>
    </div>
</div>

<div class="combtn"><a href="#" class="btn-slide">panel 2</a>
    <div id="panel-2" class="panbox"> testing panle 2
      <p><a href="#" class="btn-slide close">close</a></p>
    </div>
</div>

<div class="combtn"><a href="#" class="btn-slide">panel 3</a>
    <div id="panel-3" class="panbox"> testing panle 3
      <p><a href="#" class="btn-slide close">close</a></p>
    </div>
</div>

使用Javascript：

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $(this).parents('.combtn').find('.panbox').slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });
});

Answer 3

你可以为你的函数提供参数，并在全局变量中抓取它们：

<a class="btn-slide1" href="#" onclick="toggler('panel-1');">Click me for 1</a>
<a class="btn-slide2" href="#" onclick="toggler('panel-2');">Click me for 2</a>
<a class="btn-slide3" href="#" onclick="toggler('panel-3');">Click me for 3</a>

并编写一个函数：

var currentpanel;  
function toggler(e){
    currentpanel = $('#'+e);
    currentpanel.slideToggle("slow");
    currentpanel.toggleClass("active"); 
    return false;
});

如何逐个触发ID

3 个答案: