Question

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

我的问题

点击多个标题，一遍又一遍，然后看我的手风琴会打开就像你点击一样。我想阻止它。
我默认有可见的手风琴，如果我点击它我的手风琴是没有关闭它再次打开

＆＃13;

$(function(){
    var title = $(".title");
  title.on("click",function(){
    $(".title").removeClass("active");
    $(this).toggleClass("active");
      $(".text").slideUp();
      $(this).parents(".item").find(".text").slideToggle();
  });
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

CodePen Demo

Answer 1

您希望这部分代码在您的css中应该做什么

.active+.text {
  display: block;
}

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

您需要使用.not()

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

和

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

＆＃13;

$(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();
});

＆＃13;

@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;
}*/

＆＃13;

<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>

＆＃13;

Answer 2

您的javascript代码中完成的简单更改及其按预期工作：

$(function(){
    var title = $(".title");
  title.on("click",function(){
    if($(this).hasClass("active") == false) $(".text").slideUp();
    $(this).parents(".item").find(".text").slideToggle();
    $(".title").removeClass("active");
    $(this).addClass("active");      
  });
});

Answer 3

我希望它能解决你的问题。

$(".title").click(function(){
    if($(this).hasClass('active')){
      $(this).removeClass("active"); 
      $(this).parents(".item").find(".text").slideUp();
    } else {
      $(".title").removeClass("active"); 
      $(this).toggleClass("active"); 
      $(".text").slideUp();
      $(this).parents(".item").find(".text").slideDown();
    }   
})

@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{
  display: none;
  padding:12px;
  height: auto;
  overflow: hidden;
}
.text p {
  padding-bottom:10px;
  font-size:13px;
  line-height:24px;
  color:#333;
  text-align:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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 -->

Answer 4

调整您的javascript代码。切换功能将完成所有工作。

$(function() {
  $(document).on("click", ".title", function() {
    $(this).siblings(".text").slideToggle();
  });
});

Answer 5

请删除以下css

.active+.text {
  display: block;
}

并添加下面给出的代码

.text.active{
  display: block;
}

还将“active”类添加到默认块以打开

如何停止重复jquery？

5 个答案: