Question

我是JQuery的一个完整的小块，我只需要在开始理解整个过程之前弄清楚这一点。

我在下面的代码中使用了LI，我已经添加了float，以便＆＃34; panel1＆＃34; onclick在右侧打开，并有＆＃34; flip1＆＃34;在左边。基本上我什么都没做，只是从w3schools复制/粘贴SlideToggle（）方法并整合到＆＃34; li＆＃34;并使用浮动。我需要按类别创建服务列表，在右侧打开onclick以显示该类别的详细服务。 我需要的是onclick＆＃34; panel1＆＃34;当我点击另一个＆＃34; li＆＃34;使用相同的设置。

<ul id="service_list">
<li> 
<script> 
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle("slow");
  });
});

</script>

<style type="text/css"> 

#panel1,#flip1

{

padding:2px;

text-align:center;

background-color:#FFFFFF;

float: left;

}

#panel1

{

margin-right:80px;

display:none;

float: right;

}

</style>



<div id="flip1"><a href="#">Service Category</a></div>

<div id="panel1">Services detailed<br>

</div>

<br>

</li>

如果我浪费你的时间，我很抱歉，除了任何人，我都不要回答。不管怎样，谢谢。

Answer 1

我认为它会对你有所帮助

<script> 
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle("slow");
  });

  $("#anotherLi").click(function(){
    $("#panel1").slideToggle("slow");
  });
});

</script>


<ul id="service_list">
<li> 

<div id="flip1"><a href="#">Service Category</a></div>

<div id="panel1">Services detailed<br>

</div>

<br>

</li> 
<li id="anotherLi">

<div id="flip2"><a href="#">Service Category</a></div>

<div id="panel2">Services detailed<br>

</div>

<br>
</li>

Answer 2

你可以做这样的例子小提琴。

http://jsfiddle.net/5spsG/

$(document).ready(function(){
  $("li").hide(); // preferred over starting with "display: none" css
  $(".panel").click(function(){ 
    $("li").hide("slow");
    $(this).find("li").slideToggle("slow");
  });
});

只要单击其中一个面板，该功能就会隐藏所有li项目。然后它将仅显示该面板的li。

还要尽量确保将内容与样式和行为分开。您的javascript和css代码应该位于单独的文件中，或者至少包含在文件的不同部分中。

Answer 3

我想我明白你想要什么，除非你真的想要，否则你不需要将它们包裹在li中。但是您可以将它们与容器分组（将id更改为类以便您可以再次使用它们），并在单击类别时定位$(this)

*更新 - 我忽略了点击关闭其他人的部分，在

中添加了该部分

$(".flip").click(function(){
  var checkForOpen = $(this).closest(".container").siblings().find(".panel");
  var currentPanel = $(this).closest(".container").find(".panel");

  if(checkForOpen.is(":visible")){
    checkForOpen.slideUp(function(){
      currentPanel.slideDown("slow");     
    });   
  }else{
   currentPanel.slideToggle("slow"); 
  }
});

JSFIDDLE

JQuery SlideToggle（）方法li html

3 个答案: