Question

我有4个div，其中两个在点击（链接）上显示，并以相同的方式隐藏。当我单击其他2个div的链接时，前2个应该再次隐藏，反之亦然。现在，如果单击了2个链接，则会显示所有4个div。

简单：点击链接＆gt; show div;点击第二个链接＆gt;显示第二个div而隐藏拳头div

2个链接：

 <a class="show_hideAbout show_hideAboutArr" href="#" >About</a>

 <a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

前两个div：

<div class="slidingDivAbout">Some Content</div>
<div class="slidingDivAboutArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

其他2个div：

<div class="slidingDivContact">Some Content</div>
<div class="slidingDivContactArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

我的剧本

$(document).ready(function() {
  $(".slidingDivAbout").hide();
  $(".show_hideAbout").show();

  $('.show_hideAbout').click(function() {
    $(".slidingDivAbout").slideToggle(350);
  });

  $(".slidingDivAboutArr").hide();
  $(".show_hideAboutArr").show();

  $('.show_hideAboutArr').click(function() {
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
  });
  $(".slidingDivContact").hide();
  $(".show_hideContact").show();

  $('.show_hideContact').click(function() {
    $(".slidingDivContact").slideToggle(350);
  });

  $(".slidingDivContactArr").hide();
  $(".show_hideContactArr").show();

  $('.show_hideContactArr').click(function() {
    $(".slidingDivContactArr").fadeToggle("fast", "linear");
  });
});

Answer 1

如果不更改您的标记，您可以使用此标记：

$(document).ready(function() {
    $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0);

    $('.show_hideAbout').click(function() {
        $(".slidingDivContact").slideUp(300, function() {
            $(".slidingDivContactArr").fadeOut(300, function() {
                $(".slidingDivAbout").slideToggle(350, "linear", function() {
                    $(".slidingDivAboutArr").fadeToggle(350);
                });
            });
        });
    });
    $('.show_hideContact').click(function() {
        $(".slidingDivAbout").slideUp(300, function() {
            $(".slidingDivAboutArr").fadeOut(300, function() {
                $(".slidingDivContact").slideToggle(350, function() {
                    $(".slidingDivContactArr").fadeToggle(350, "linear");
                });
            });
        });
    });
});

<强> Working Sample

Answer 2

嗨，我会这样做jsfiddle示例

HTML

<a class="show_hideAbout" href="#" >About</a>

<a class="show_hideContact" href="#" >Contact</a>
<div class="slidingDivAbout">Some Content1</div>
<div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
<div class="slidingDivContact">Some Content2</div>
<div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>

脚本

$(function(){

         $('.slidingDivAbout').hide();
         $('.slidingDivAboutArr').hide();
         $('.slidingDivContact').hide();
         $('.slidingDivContactArr').hide();

         $('.show_hideAbout').click(function() {
            $('.slidingDivAbout').show(350);
            $('.slidingDivAboutArr').show()
            $('.slidingDivContact').hide();
            $('.slidingDivContactArr').hide();
        });

        $('.show_hideContact').click(function() {         
            $('.slidingDivContact').show(350);
            $('.slidingDivContactArr').show('fast', 'linear');
            $('.slidingDivAbout').hide();
            $('.slidingDivAboutArr').hide();
        });
});

Answer 3

也许尝试这样的事情？

<a class="show_hideAbout" href="#" >About</a>
<a class="show_hideContact" href="#" >Contact</a>

<div class="divAbout">
  <div class="slidingDivAbout">Some Content</div>
  <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

<div class="divContact">
  <div class="slidingDivContact">Some Content</div>
  <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

和javascript：

$(document).ready(function() {

    $(".divAbout").hide();
    $(".divContact").hide();

    $('.show_hideAbout').click(function() {
        if( $(".divContact").is(":visible") ) {
          $(".divContact").slideToggle(350, 'linear', function(){
            $(".divAbout").slideToggle(350, 'linear');
          });
        } else {
          $(".divAbout").slideToggle(350, 'linear');
        }
    });

    $('.show_hideContact').click(function() {
        if( $(".divAbout").is(":visible") ) {
          $(".divAbout").slideToggle(350, 'linear', function(){
            $(".divContact").slideToggle(350, 'linear');
          });
        } else {
          $(".divContact").slideToggle(350, 'linear');
        }
    });

});

Answer 4

对于每个链接，您应该绑定一次点击。

<a class="show_hideAbout show_hideAboutArr" href="#" >About</a>
<a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

以下2个是重复的，因为它们将点击绑定到同一个标签。 class =“show_hideAbout show_hideAboutArr”）

$('.show_hideAbout').click(function(){
      $(".slidingDivAbout").slideToggle(350);
      });

$('.show_hideAboutArr').click(function(){
      $(".slidingDivAboutArr").fadeToggle("fast", "linear");
      });

只保留一个。和

$('.show_hideAbout').click(function(){
    $(".slidingDivAbout").slideToggle(350);
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
});

Answer 5

我认为使用CSS类而不是加载一些hide / show方法会更好。 HTML看起来像：

<a class="showAbout" href="#" >About</a>
<a class="showContact" href="#" >Contact</a>
<div id='wrapper'>
    <div class="about">
        <div class="slidingDivAbout">Some Content 1</div>
        <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
    <div class="contact">
        <div class="slidingDivContact">Some Content 2</div>
        <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
</div>

有两个CSS规则：

#wrapper > div {
    display: none;
}
#wrapper > div.show {
    display: block;
}

然后是jQuery：

$(function() {

    $(document).on('click', '.showAbout', function() {
        $('.about').siblings('div').removeClass('show').end().toggleClass('show');
    });

    $(document).on('click', '.showContact', function() {
        $('.contact').siblings('div').removeClass('show').end().toggleClass('show');
    });

});

Answer 6

我会在你的html标签中使用自定义属性：

Here's a working demo

HTML：

<a class="slidingLink" slide="about" href="#" >About</a>
<a class="slidingLink" slide="contact" href="#" >Contact</a>

<div class="slidingContainer" id="about">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>
<div class="slidingContainer" id="contact">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

JavaScript的：

$(document).ready(function(){
    $('.slidingContainer').hide();
    $('.slidingLink').click(function () {
        var toSlide = $(this).attr("slide");
        $("#"+toSlide).slideDown(350);
        $('.slidingContainer').each(function () {
            if ($(this).attr("id") != toSlide) {
                $(this).slideUp(350);
            }
        });
    });
});

这绝对是通用的，因此添加新链接所需要做的就是添加一个新的a标记，并将slide属性设置为该类的div的id slidingContainer。

显示另一个div时隐藏div

6 个答案: