Question

单击链接时出现多个div。问题是如果已经可见，则下面会出现一个新的div。如何用新的替换“旧”？

jQuery("#div_to_show").hide();
jQuery(".toggle_link").show();

jQuery('.toggle_link').click(function(){
jQuery("#div_to_show").slideToggle();


jQuery("#div_to_show2").hide();
jQuery(".toggle_link2").show();

jQuery('.toggle_link2').click(function(){
jQuery("#div_to_show2").slideToggle();


jQuery("#div_to_show3").hide();
jQuery(".toggle_link3").show();

jQuery('.toggle_link3').click(function(){
jQuery("#div_to_show3").slideToggle();

有多个div的演示：http://jsfiddle.net/ap2EQ/

Answer 1

您可以在运行slideToggle（）

之前隐藏其他div

jQuery('.iscriversi_toggle').click(function(){
    jQuery("#collaborare").hide();
    jQuery("#sostenerci").hide();
    jQuery("#iscriversi").slideToggle();
});

Answer 2

我会使用一个单独的div，没有任何内容可以用来显示用户点击的内容：

<!-- these divs stay hidden; they are just used to store the data you want to display later -->
<div id="iscriversi">div1</div>
<div id="collaborare">div2</div>
<div id="sostenerci">div3</div>

<!-- placeholder where content will be displayed when user clicks -->
<div id="target_container"></div>

然后您可以使用此函数替换target_container中的内容：

function replaceDivContent(newDivID) {

   // Get the data from the DIV you want to display.
   newContentFromDiv = jQuery(newDivID).html();

   jQuery('#target_container')
     .hide() // hide so we can use the slide effect later
     .html(newContentFromDiv) // replace content of the placeholder div
     .slideToggle(); // show the placeholder div again using slide effect
}

工作JSFiddle： http://jsfiddle.net/zpYBM/1/

Answer 3

您可以在代码中改进多项内容。首先，您不需要3 jQuery document ready个函数。您只需要在网页加载时初始化代码。您可以使用classes来简化代码。但主要是你需要做的是在你切换之前隐藏所有的div或使新的div可见。希望这段代码能帮助您了解并了解它的工作原理。

HTML

<a class="toggle" data-target="iscriversi">...iscriversi</a><br>
<a class="toggle" data-target="collaborare">...collaborare</a><br>
<a class="toggle" data-target="sostenerci">...sostenerci</a>
<div id="iscriversi" class="div">div1</div>
<div id="collaborare" class="div">div2</div>
<div id="sostenerci" class="div">div3</div>

的jQuery

jQuery(document).ready(function(){
  jQuery(".div").hide();
  jQuery('.toggle').click(function(){
    jQuery(".div").hide();
    jQuery("#"+$(this).data('target')).slideToggle();
  });
});

小提琴

http://jsfiddle.net/ap2EQ/2/

Answer 4

这是我的建议，让这一切都有效......

<强> HTML

<a class="iscriversi_toggle aShow">...iscriversi</a>
<br>
<a class="collaborare_toggle aShow" >...collaborare</a>
<br>
<a class="sostenerci_toggle aShow">...sostenerci</a>

<div id="iscriversi" class="divtoggle">div1</div>
<div id="collaborare"  class="divtoggle">div2</div>
<div id="sostenerci"  class="divtoggle">div3</div>

您可以在此处看到我已为每个<a>元素添加了一个类。该课程为aShow。这使我们可以使用相同的调用一次访问所有锚点。

我还为每个divtoggle元素添加了div类。同样的原因。

<强>的jQuery

jQuery(document).ready(function(){
    // Hide all the divtoggle tags, and show the anchors
    jQuery ('.divtoggle').hide();
    jQuery(".aShow").show();

    jQuery('.iscriversi_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want
        jQuery ('.divtoggle').hide();
        jQuery("#iscriversi").slideToggle();
    });

    jQuery('.collaborare_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want        
        jQuery ('.divtoggle').hide();
        jQuery("#collaborare").slideToggle();
    });

    jQuery('.sostenerci_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want        
        jQuery ('.divtoggle').hide();
        jQuery("#sostenerci").slideToggle();
    });

});

我在代码中有评论，因此很容易理解。这比您原来的更清洁，更具可扩展性。另外，作为一方，您不需要反复指定jQuery(document).ready(function(){。你应该只使用一次。

最后，这是一个jsFiddle演示： DEMO

Answer 5

   $(document).ready(function(e){
   $("a").each(function(index,element){
   $(element).click(function(){
   var dis = $(element).next().css("display");
   if(dis == 'none')
    {
            $('div').hide(500);

        $(element).next().show(500);

    }else{
    $(element).next().hide(500)
    };

      })
    })

   })

打开一个新的关闭div（jQuery幻灯片）

5 个答案: