1

单击链接时出现多个 div。问题是如果一个新的 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/

4

5 回答 5

2

您可以在运行 slideToggle() 之前隐藏其他 div

jQuery('.iscriversi_toggle').click(function(){
    jQuery("#collaborare").hide();
    jQuery("#sostenerci").hide();
    jQuery("#iscriversi").slideToggle();
});
于 2013-10-25T20:59:00.010 回答
1

我会使用没有内容的单独 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/

于 2013-10-25T21:00:01.183 回答
1

您的代码中有很多可以改进的地方。首先你不需要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/

于 2013-10-25T21:00:58.133 回答
1

这是我的建议，以使这一切正常...

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

于 2013-10-25T21:12:43.220 回答
0 
   $(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)
    };

      })
    })

   })
于 2013-10-25T20:59:36.937 回答