0

frist check this http://jsfiddle.net/jQFWM .. this is working perfectly. but i don't want to 

$(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;
    });  
});

write like that. because i don't want to repate same code again and again. also in the future this panel and tiggering will be dynamic so it will be more than 3. so what is in my mind if i can trigger that by calling number say like 1, 2, 3 etc then can code will be small i guess. so guys any idea how ? like $("#panel+number")

http://jsfiddle.net/jQFWM/1 this one short code but not working.

4

3 回答 3

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/

于 2013-06-12T16:01:38.643 回答
1

此解决方案不需要 ID 或数字链接。这些元素通过父子关系而不是硬编码的 ID。

演示

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;
    });
});
于 2013-06-12T16:04:00.000 回答
0

您可以在函数中提供参数并在全局变量中获取它们：

<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;
});
于 2013-06-12T15:50:32.637 回答