1

我有 6 个显示和隐藏的 DIV，由 onClick 事件触发。目前，如果您单击触发这些 div 的 6 张不同图片，它们都会显示在彼此之上。

我希望一次只显示一个 DIV。因此，当您单击不同的图像时，它会隐藏当前显示的 div 并显示新的。

我猜我需要以某种方式遍历这些，有人能指出我正确的方向吗？我的代码：

<script type="text/javascript">

        $(document).ready(function () {

            $(".slidingDiv").hide();
            $(".show_hide").show();
            $('.show_hide').click(function () {
                $(".slidingDiv").slideToggle();
            });

            $(".slidingDiv2").hide();
            $(".show_hide2").show();
            $('.show_hide2').click(function () {
                $(".slidingDiv2").slideToggle();
            });

            $(".slidingDiv3").hide();
            $(".show_hide3").show();
            $('.show_hide3').click(function () {
                $(".slidingDiv3").slideToggle();
            });

            $(".slidingDiv4").hide();
            $(".show_hide4").show();
            $('.show_hide4').click(function () {
                $(".slidingDiv4").slideToggle();
            });

            $(".slidingDiv5").hide();
            $(".show_hide5").show();
            $('.show_hide5').click(function () {
                $(".slidingDiv5").slideToggle();
            });

            $(".slidingDiv6").hide();
            $(".show_hide6").show();
            $('.show_hide6').click(function () {
                $(".slidingDiv6").slideToggle();
            });
        });

    </script>
4

2 回答 2

0

Not completely sure if this is what you're going for, but something like this might work:

HTML:

<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->

<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->

JQuery:

$("img").click(function () {
    $("div").slideUp(190);                      // hide divs previously shown
    var divSelect = $(this).attr('class');      // get class of div to show
    $("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});

WORKING EXAMPLE

于 2013-05-01T19:07:23.563 回答
0

我仍在努力简化它，但它确实有效。您将不得不对每个 div 重复它，并给出不同的选择器名称。当我想出一个循环时，我会告诉你的。

祝你好运！

<!--HTML starts-->              

<div class="med-wrap-video">
    <div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
      <br>
        <a href="#" class=".a selector">Read More</a></p>

     <br>
        <span class="selector1">

          <p class="body-text">
            Title: <br>
            Composer: <br>
            Year: <br>
         </p>
       </span>

  </div>    
</div>

<!--JS begins-->    

$(document).ready(function(){

$(".selector1").hide();        

$(".a selector").click(function(event){    
 event.preventDefault();           //prevents page to reload
$(".selector1").slideToggle(600);
      $(this).toggleClass(".selector1");
    });
于 2016-11-23T05:43:13.697 回答