Question

有人可以看看我的代码，看看我做错了什么......

我是初学者jquery的人我尝试阅读所有的论坛帖子，并实现他们自己，我仍然得到错误......这花了我两天时间，我要杀了我的笔记本电脑

非常感谢，

〜grace

＆＃13;

$(document).ready(function() {
  //parent. on click anchor
  $('.tab').on('click', '.clk', function(event) {
    event.stopPropagation();
    //Find the child by traversing
    $(this).closest('.clk').find('.reveal').slideToggle();
    //Show the child
  });
});

＆＃13;

body {
  width: 350px;
  margin: 0 auto;
}
h1 {
  font-size: 1em;
  color: #FF7F50;
}
.tbCont {
  /* width: 100%;float:left; this works too*/
  overflow: hidden;
  border: 1px solid red;
  text-align: center;
}
ul {
  padding-left: 0;
}
li {
  list-style: none;
  display: inline-block;
  zoom: 1;
  width: 90%;
}
.cHolder {
  display: none;
}
/*hides related content*/

.reveal {
  width: 100%;
  background-color: pink;
  display: inline-block;
  zoom: 1;
  border-bottom: 2px solid #aaa;
}
.reveal span {
  float: left;
  width: 40%;
  margin: 10px;
}
.reveal img {
  float: right;
  width: 40%;
  height: 40%;
  margin: 10px;
  background-color: #fff;
}
a {
  width: 100%;
  text-align: left;
  border-style: none;
  border-bottom: 2px solid #aaa;
  background-color: white;
  font-size: 2em;
  color: #aaa;
  display: block;
  text-decoration: none;
}
a:hover {
  color: orange;
  border-bottom: 2px solid orange;
}
a:active {
  color: #7FFFD4;
  border-bottom: 2px solid #7FFFD4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>HTML5, CSS3 and JavaScript demo</title>
</head>

<body>

  <div class="tbCont">
    <h1>Title</h1>
    <ul class="tab">
      <li>
        <a href="#" class="clk">Tab Title</a>
        <ul class="cHolder">
          <li class="reveal">
            <span>copy here  Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
            <img/>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="clk">Tab Title</a>
        <ul class="cHolder">
          <li class="reveal">
            <span>copy here.</span>
            <img/>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="clk">Tab Title</a>
        <ul class="cHolder">
          <li class="reveal">
            <span>copy here</span>
            <img/>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="clk">Tab Title</a>
        <ul class="cHolder">
          <li class="reveal">
            <span>copy here</span>
            <img/>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="clk">Tab Title</a>
        <ul class="cHolder">
          <li class="reveal">
            <span>copy here</span>
            <img/>
          </li>
        </ul>
      </li>
    </ul>

  </div>




  <!-- End your code here -->
</body>

</html>

＆＃13;

Answer 1

我试图纠正这个小提琴，看看这是否有帮助：

http://jsfiddle.net/h9u2g6bu/

注意显示：无应用于你要切换的内容，即.cHolder .reveal而不是.cHolder：

.cHolder .reveal {
  display: none;
}

请看看我的代码....显示ul之后＆lt;立GT;＆LT; a＆gt;点击事件 - 请帮忙 - 我做错了什么

1 个答案: