Question

我对jQuery知之甚少，但我想在html中执行类似的操作：拥有嵌套结构

<div id="special">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

并提供有关special的一些说明，以便内部的内容不会立即显示，但只有在点击标题后才会显示，如果再次点击标题，则会再次消失。像accordion中那样的效果会很好，但重点是不要点击另一个方框，而是同一个方框。

我想它必须在某个地方完成，但我只是不知道合适的关键词。对完成示例的任何想法或参考将非常有帮助和欢迎。

Answer 1

这是一种简单的方法。我在special中添加了一个额外的head元素来切换行元素

$(function() {
  $("#head").click(function() {
    $(this).nextAll('.row').toggleClass('visible');
  });
});

#special {
  border: 1px solid red;
  display: table;
}
#head {
  height: 10px;
  border: 1px solid blue;
  display: table-row;
  cursor: pointer;
}
.row {
  display: none;
}
.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="special">
  <div id="head">Header</div>
  <div class="row">Some content</div>
  <div class="row">Some content</div>
  <div class="row">Some content</div>
</div>

Answer 2

<强> HTML

<button class="title">Title</button>
<div id="special">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

<强>的jQuery

$('.title').click(function() {
    $('#special').toggle('slow');
});

<强> Demo

Answer 3

我不知道我是否做得对，但这是我的建议：

<强>的Javascript

$('h1').on('click', function(){
    $(this).next('div').slideToggle();
});

<强> HTML

<h1>Special</h1>
<div id="special">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

<强> CSS

#special{
    display: none;
}

Demo

Answer 4

你也可以在纯CSS中执行此操作。可能看起来像：

div#special {
  height: 20px;
  width: 100px;
  background-color: red;
}

div#special:before {
  position: absolute;
  content: 'click me!';
  color: white;
}

div#special:focus:before {
  display: none;
}

div#special:focus {
  background-color: transparent;
}

div#special > div {
  display: none;
}

div#special:focus > div {
   display: block;
}

但是您需要稍微修改一下HTML，我们需要一个tabIndex才能使用

<div id="special" tabIndex="1">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

演示：http://jsbin.com/zatevunewo/1/edit?html,css,output

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div id="special" style="width:200px;height:200px;background:green;">
   <div id="special1" style="width:200px;height:20px;background:red;">Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

<script>
    $("#special").click(function(){
        $("#special1").toggle();
});
</script>

点击div #special上的任意位置... #special1会出现，并在下次点击时消失。

单击标题显示和消失div内容

5 个答案: