jquery - 如何停止使用 jquery 重复？

标签 jquery html css

这是我的第一个 jquery 插件，我有一些错误需要修复和学习。

我的问题

  • 点击标题不止一个，一遍又一遍然后看我的 Accordion 会 点击多少就打开多少。我想阻止它。
  • 默认情况下我有可见的 Accordion ，如果我点击它我的 Accordion 是 不关闭它再次打开

$(function(){
    var title = $(".title");
  title.on("click",function(){
    $(".title").removeClass("active");
    $(this).toggleClass("active");
      $(".text").slideUp();
      $(this).parents(".item").find(".text").slideToggle();
  });
});
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900');
body {
  background: #1d1f20;
  font-family: 'Work Sans', sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  padding: 0;
  margin: 0;
}

#accordion {
  width: 600px;
  margin: 30px auto;
  background: #FFF;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

#accordion:before,
#accordion:after {
  content: "";
  display: table;
  clear: both;
}

.title {
  position: relative;
  background: #FC4349;
  color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #ed383e;
  border-left: 5px solid #ed383e;
  font-size: 14px;
}

.active {
  border-left-color: #bf262b;
}

.title:after {
  content: "\f107";
  display: block;
  position: absolute;
  right: 3%;
  top: 20%;
  font-family: FontAwesome;
  font-size: 20px;
}

.active:after {
  content: "\f106";
  display: block;
}

.fa {
  padding-right: 12px;
}

.text {
  padding: 12px;
  display: none;
}

.text p {
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.active+.text {
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="accordion">

  <div class="item">
    <div class="title"><i class="fa fa-file-text" aria-hidden="true"></i>Accordion 1</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ratione dolor tenetur recusandae doloremque molestias itaque aspernatur fugiat quidem! Dolorum incidunt amet voluptatibus quas illo facilis nobis nulla dolorem iure!</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at velit quia recusandae eius iste minus blanditiis, atque, laboriosam hic iusto magnam ducimus necessitatibus et inventore. Animi, qui, voluptatibus. Eligendi?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-cog" aria-hidden="true"></i> Accordion 2</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, eos.</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title active"><i class="fa fa-envira" aria-hidden="true"></i> Accordion 3</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur cum minima nesciunt modi sunt unde eaque atque, ipsam, officia fugiat incidunt dolor molestiae ullam laudantium tempora, enim odio ratione?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-pie-chart" aria-hidden="true"></i> Accordion 4</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <!-- item-->


  <div class="item">
    <div class="title"><i class="fa fa-bar-chart" aria-hidden="true"></i> Accordion 5</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nisi ratione totam placeat delectus, omnis illo sit aliquid error est fugit repellat expedita assumenda quam quaerat quas vel sapiente ullam possimus, repudiandae molestias. Deserunt
        ducimus illum iure iusto reprehenderit nam, neque, quia porro? Ea officia accusamus molestiae, odit assumenda non laboriosam quibusdam hic iusto, debitis distinctio ipsa ducimus neque nam magnam mollitia labore, unde commodi repellendus repellat!
        Quis, quaerat impedit.</p>
    </div>
  </div>
  <!-- item-->
</div>
<!--/ accordion -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CodePen Demo

最佳答案

你希望这部分代码在你的 CSS 中做什么

.active+.text {
  display: block;
}

删除这部分代码 .. 这不是我的问题 .. 我不知道 downvote 是什么愚蠢的 .. 而 .not() 是正确的答案

你需要使用.not()

$(".title").not($(this)).removeClass("active");

和

$(".text").not($(this).parents(".item").find(".text")).slideUp();


$(function(){
    var title = $(".title");
  title.on("click",function(){
    var ThisIt = $(this);
    $(".title").not(ThisIt).removeClass("active");
    $(this).toggleClass("active");
    $(".text").not(ThisIt.next(".text")).slideUp(100);
    ThisIt.next(".text").slideToggle(100);
  }).eq(2).click();
});
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900');
body {
  background: #1d1f20;
  font-family: 'Work Sans', sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  padding: 0;
  margin: 0;
}

#accordion {
  width: 600px;
  margin: 30px auto;
  background: #FFF;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

#accordion:before,
#accordion:after {
  content: "";
  display: table;
  clear: both;
}

.title {
  position: relative;
  background: #FC4349;
  color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #ed383e;
  border-left: 5px solid #ed383e;
  font-size: 14px;
}

.active {
  border-left-color: #bf262b;
}

.title:after {
  content: "\f107";
  display: block;
  position: absolute;
  right: 3%;
  top: 20%;
  font-family: FontAwesome;
  font-size: 20px;
}

.active:after {
  content: "\f106";
  display: block;
}

.fa {
  padding-right: 12px;
}

.text {
  padding: 12px;
  display: none;
}

.text p {
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 24px;
  color: #333;
  text-align: left;
}

/*.active+.text {
  display: block;
}*/
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="accordion">

  <div class="item">
    <div class="title"><i class="fa fa-file-text" aria-hidden="true"></i>Accordion 1</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ratione dolor tenetur recusandae doloremque molestias itaque aspernatur fugiat quidem! Dolorum incidunt amet voluptatibus quas illo facilis nobis nulla dolorem iure!</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at velit quia recusandae eius iste minus blanditiis, atque, laboriosam hic iusto magnam ducimus necessitatibus et inventore. Animi, qui, voluptatibus. Eligendi?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-cog" aria-hidden="true"></i> Accordion 2</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, eos.</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-envira" aria-hidden="true"></i> Accordion 3</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur cum minima nesciunt modi sunt unde eaque atque, ipsam, officia fugiat incidunt dolor molestiae ullam laudantium tempora, enim odio ratione?</p>
    </div>
  </div>
  <!-- item-->

  <div class="item">
    <div class="title"><i class="fa fa-pie-chart" aria-hidden="true"></i> Accordion 4</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <!-- item-->


  <div class="item">
    <div class="title"><i class="fa fa-bar-chart" aria-hidden="true"></i> Accordion 5</div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nisi ratione totam placeat delectus, omnis illo sit aliquid error est fugit repellat expedita assumenda quam quaerat quas vel sapiente ullam possimus, repudiandae molestias. Deserunt
        ducimus illum iure iusto reprehenderit nam, neque, quia porro? Ea officia accusamus molestiae, odit assumenda non laboriosam quibusdam hic iusto, debitis distinctio ipsa ducimus neque nam magnam mollitia labore, unde commodi repellendus repellat!
        Quis, quaerat impedit.</p>
    </div>
  </div>
  <!-- item-->
</div>
<!--/ accordion -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

关于jquery - 如何停止使用 jquery 重复？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44156880/

上一篇：html - 对齐按钮中的文本

下一篇：css - :after node is not visible with text overflow ellipsis

相关文章：

html - 段落标记的边距超出 Div

javascript - HTML 5 -- 垂直滚动 -- BEN THE BODYGUARD

javascript - 如何将自己的 <divs> 动态添加到容器中？

jquery - 获取div的输入文件值

javascript - 如何一次将类添加到一个div Jquery

html - 样式化双向网站 CSS 最佳实践？

html - 如何防止切换复选框元素与另一个元素重叠？

javascript - 更改给定数据模型的 HTML 样式

javascript - 当触发响应式 jQuery 函数时，该函数不会停止触发

jQuery 多复选框过滤器组

©2024 IT工具网  联系我们