Question

我正试图想办法干掉这段代码。我试图隐藏一个div，因为另一个出现。我正在考虑一个for循环，但是当我在同一个循环中切换另一个时，无法想出隐藏的方法。每个div应该分开隐藏，而不是一次隐藏。

感谢javaScript初学者。

＆＃13;

$( document ).ready(function() {

$(".hide").hide();

$("#pic0").click(function(){
    $("#text0").slideToggle("fast");
    $("#pic0").hide();
  });

  $("#text0").click(function(){
    $("#pic0").slideToggle("fast");
    $("#text0").hide();

  });

  $("#pic1").click(function(){
    $("#text1").slideToggle("fast");
    $("#pic1").hide();
 
  });

  $("#text1").click(function(){
    $("#pic1").slideToggle("fast");
    $("#text1").hide();

  });

  $("#pic2").click(function(){
    $("#text2").slideToggle("fast");
    $("#pic2").hide();


    
  });

  $("#text2").click(function(){
    $("#pic2").slideToggle("fast");
    $("#text2").hide();

  });
  
  });

＆＃13;

.first {
  background-color: black;
  height: 300px;
  width: 300px;
  margin: 10px;
 }

.hide {
  background-color: red;
  height: 300px;
  width: 300px;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="first" id="pic0"></div>
<div class="hide" id="text0"></div>

<div class="first" id="pic1"></div>
<div class="hide" id="text1"></div>

<div class="first" id="pic2"></div>
<div class="hide" id="text2"></div>

＆＃13;

Answer 1

这是你需要的吗？ http://jsfiddle.net/ymayo1by/

$(document).ready(function () {

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

    $(".first").click(function () {
        $(this).next('.hide').slideToggle('fast')
        .siblings('.hide:visible').slideUp('fast');
    });

});

编辑：修复了活动项目上的toggle问题。

Answer 2

我不知道你是否这样做是为了学习javascript，或者因为你需要在开发项目中使用它，但jQuery UI Accordion似乎完全符合你的描述。

示例：JSFIDDLE

  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });

Answer 3

如果您修改HTML并将集合分组为：

<div class="group">
    <div class="first pic" id="pic0"></div>
    <div class="hide text" id="text0"></div>
</div>

<div class="group">
    <div class="first pic" id="pic1"></div>
    <div class="hide text" id="text1"></div>
</div>

您可以将您的javascript修改为：

$('.pic').on('click', function () {
    $(this).siblings('.text').slideToggle("fast");
    $(this).hide();
});

$(".text").click(function () {
    $(this).siblings('.pic').slideToggle("fast");
    $(this).hide();
});

这是一个演示：http://jsfiddle.net/zz7mt93o/1/

Answer 4

首先，您必须改进标记，例如将其分组以便通过JS / jQuery更容易处理。我想出了一个不需要你更改标记的脏版本。看看这是否适合你。

$(".hide").hide();
$("[id^='pic'], [id^='text']").click(function() {
    var id = this.id.slice(0, -1);
    var $which = id==="text" ? $(this).prev() : $(this).next();
    $(this).hide();
    $which.slideToggle("fast");
});

演示@ Fiddle

稍微改进版本@ jsFiddle

Answer 5

这应该按照您的要求进行：

jsFiddle Demo

$('div[id^="pic"]').click(function(){
    var num = this.id.slice(-1); //returns final char: 0, 1, 2, etc
    $('#text'+num).slideToggle('fast');
    $(this).hide();
});
$('div[id^="text"]').click(function(){
    var num = this.id.slice(-1); //returns final char: 0, 1, 2, etc
    $('#pic'+num).slideToggle('fast');
    $(this).hide();
});

你可以通过（1）将div包裹在包含div（2）具有固定高度的div中来避免令人讨厌的div跳跃。 See this slight modification to the previous jsFiddle

注意：

我们使用“start with”css / jQuery选择器来绑定，例如，首先点击事件到ID以“pic”开头的所有DIV ......
this.id（原生javascript）比使用$(this)更快并导致相同的值
我们slice关闭最后一个字符，插入var num，然后用它来识别要切换的正确text或pic div

干jQuery隐藏和显示div

5 个答案: