Question

我的问题是关于jQuery及其slideToogle（）函数。我试图在1页上多次使用此功能，我问是否可能有一个div ID或Class将在此函数中。

$(document).ready(function(){
          $("class or div").click(function(){
            $("class or div").slideToggle("fast");
          });
});

我的目标是拥有几个div，当我点击它们时，它们将分开扩展/关闭。虽然我只有一个div，但效果很好。当我点击我的class="class"时，我将所有div设置为class（让我们说第一个div的类是class="div"并且div应该移动的类是<div class="class">）每一个<div class="div">都会扩展。

$(document).ready(function(){
          $(".class").click(function(){
            $(".div").slideToggle("fast");
          });
});

我试图解决这个问题，但我（到目前为止）只有工作代码是

$(document).ready(function(){
      $("#class1").click(function(){
        $("#div1").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#class2").click(function(){
        $("#div2").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#class3").click(function(){
        $("#div3").slideToggle("fast");
      });
    });

是否真的有必要使用那么多行代码（特别是当我计划拥有超过15种这类div时）？

感谢您的帮助。

我的HTML：

<img class="prace" src="images/kresby/lambo.jpg">
<div id="flip1"> 1. Lamborghini Gallardo Superleggera</div>
<div id="panel1">Lamborghini Gallardo Superleggera</div>

<img class="prace" src="images/kresby/corvette.jpg">
<div id="flip2">TOGGLE</div>
<div id="panel2">TEXT</div>

<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3">TOGGLE</div>
<div id="panel3">TEXT</div>
.
.
.

我的剧本：

    $(document).ready(function(){
      $("#flip1").click(function(){
        $("#panel1").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#flip2").click(function(){
        $("#panel2").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#flip3").click(function(){
        $("#panel3").slideToggle("fast");
      });
    });

我的CSS：

#flip1,#flip2,...{
    width: 80%;
    margin: 0 auto;
    padding:10px;
    text-align:center;
    background-color: #191919;
    border-radius:10px;
    margin-bottom: 5px;
}

#panel1,#panel2...{
    text-align: center;
    background: url("images/b.PNG"); ;
    display:none;
    padding: 50px;
    border-radius: 5px;
    border: 1px ridge #ffff66;
}

Answer 1

如果有可能，将第二个<div>移动到第一个<div class="flip">Headline 1 <div class="sub">Desciption</div> </div> <div class="flip">Headline 2 <div class="sub">Desciption</div> </div>，你就可以这样做：

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).children(".sub").slideToggle("fast");
  });
});

使用Javascript：

{{1}}

Answer 2

你应该在事件中使用$（this）来仅滑动trigerred事件的特定元素，而不是所有具有相同类的元素。

根据您的HTML结构，您还可以使用next（）。

$(document).ready(function(){
  $("div[id*='flip']").click(function(){
    $(this).next().slideToggle();
  });
});

如果你对id为'flip1'，'flip2'等的所有div使用一个公共类会更好，也许是一个名为'flip'的类。

然后你可以简单地使用以下内容：

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next().slideToggle();
  });
});

Answer 3

将类flip和panel添加到元素

<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3" class="flip">TOGGLE</div>
<div id="panel3" class="panel">TEXT</div>

然后

$('.flip').click(function(){
    $(this).next('.panel').toggle()
})

Answer 4

我个人会考虑悬停效果。代码的实际部分，切换内容，我将它们保存在一个函数中，然后使用悬停来传递ID。

JS：

$(document).ready(function(){
    function makeThemToggle(toggleID, nextDivID){
        $("#"+toggleID).click(function(){
            $("#"+nextDivID).slideToggle("fast");
        });
    }

    var nextDiv = '';

    $("#flip1").hover(function(){
        nextDiv = ($("#flip1").next().attr('id'));
        makeThemToggle('flip1',nextDiv);
    });

    $("#flip2").hover(function(){
        nextDiv = ($("#flip2").next().attr('id'));
        makeThemToggle('flip2',nextDiv);
    });

    $("#flip3").hover(function(){
        nextDiv = ($("#flip3").next().attr('id'));
        makeThemToggle('flip3',nextDiv);
    });

});

工作JS小提琴：http://jsfiddle.net/QXbAZ/2/

但是要注意：这样，与悬停相结合的切换效果变得非常明显，并且可能涉及2或3个元素切换实例。

Answer 5

在为每个翻转添加一个类之后，您也可以像这样使用each()：

$(document).ready(function(){
    $(".flip").each(function(){
      $(this).click(function(){
        $(this).next().slideToggle("fast");
      });
    });
 });

Fiddle

slideToggle功能单独工作

5 个答案: