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

Question

这是我的第一个 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

Answer 1

你希望这部分代码在你的 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>