0

我的问题是关于 jQuery 和它的 slideToogle() 函数。我试图在 1 页上多次使用此功能，并询问是否有可能在此功能中拥有一个 div ID 或 Class。

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

我的目标是有几个 div，当我点击它们时，它们会单独展开/关闭。当我只有一个 div 时，它工作得很好。当我将所有 div 设置为 class 时（假设第一个 div 的class="class"class 和应该移动的 div 的 class 是class="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;
}
4

5 回答 5

0

如果可能的话，将第二个<div>s 移动到第一个 s 中，你可以这样做：

<div class="flip">Headline 1
  <div class="sub">Desciption</div>
</div>

<div class="flip">Headline 2
  <div class="sub">Desciption</div>
</div>

Javascript：

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).children(".sub").slideToggle("fast");
  });
});
于 2013-09-20T06:52:59.400 回答
0

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

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 个元素切换实例。

于 2013-09-20T07:19:51.330 回答
0

您应该在事件中使用 $(this) 来仅滑动触发事件的特定元素，而不是滑动具有相同类的所有元素。

根据您的 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();
  });
});
于 2013-09-20T07:00:48.510 回答
0

添加类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()
})
于 2013-09-20T07:08:35.437 回答
0

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

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

小提琴

于 2013-09-20T07:30:34.823 回答