使用jQuery通过超链接显示Div

时间:2014-12-03 11:00:21

标签: javascript jquery

我点击按钮时会打开一个jQuery面板。

但是,我想在页面底部打开同一个面板的第二个链接。

我如何实现这一目标?

这是我的JSFiddle&我的Javascript:

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");   
        $("#open").addClass("hidden");
         $("#close").removeClass("hidden");
    });     

    // Switch visiblility of the "Close Panel" button
    $("#close").click(function () {
        $("div#panel").slideUp("slow"); 
        $("#close").addClass("hidden");
        $("#open").removeClass("hidden");
    });

    });

非常感谢任何指导。

4 个答案:

答案 0 :(得分:1)

它可能很简单但如果你触发按钮的click事件,它应该产生你需要达到的效果。

$("#myLink").click(function(){
    $("#open").click();
    });

这是更新的小提琴: http://jsfiddle.net/4dkoke6w/2/

如果这不是您想要的,请告诉我,我可以根据您的要求稍微调整一下。

答案 1 :(得分:0)

扩展您的选择器:

// Expand Panel
$("#open, #link").click(function(){
    $("div#panel").slideDown("slow");   
    $("#open").addClass("hidden");
    $("#close").removeClass("hidden");
});     

答案 2 :(得分:0)

像这样:

$(document).ready(function() {

function showPanel(){
 $("div#panel").slideDown("slow");   
        $("#open").addClass("hidden");
         $("#close").removeClass("hidden");
}

// Expand Panel
$("#open,#second-button-you-talked-about").click(showPanel); 
//or    
$("#open").click(showPanel);
$("#second-button-you-talked-about").click(showPanel);

// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
    $("div#panel").slideUp("slow"); 
    $("#close").addClass("hidden");
    $("#open").removeClass("hidden");
});

});

(您还应该将jQuery元素存储在变量中)

答案 3 :(得分:0)

使用class而不是id

$(".opendivs").click(function(){
    $("div#panel").slideDown("slow");   
    $("#open").addClass("hidden");
     $("#close").removeClass("hidden");
}); 

将类 opendivs 提供给您想要打开div的所有链接