Wie wiederhole ich mit jquery?

Dies ist mein erstes Plugin mit Jquery und ich habe einen Bug zu beheben und zu lernen.Wie wiederhole ich mit jquery?

Meine Fragen

Click Titel mehr als ein, immer und immer dann wird mein Akkordeon sehen so viel offen sein, wie Sie es verhindern click.I wollen.
Ich habe sichtbar Akkordeon standardmäßig und wenn ich es mein Akkordeon klicken wird es wieder nicht schließen

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

Quelle

2017-05-24 ani_css

Hey @ani_css, können Sie jQueryUI Akkordeon verwenden. Es ist ganz einfach. – codesayan

Ich entwickle, um zu verbessern und lerne mich nicht zu verwenden :) –

Keine Notwendigkeit, '$ (". Title ") zu verwenden. RemoveClass (" active ");' toogle() Funktion wird es tun. – Ejaz47

Öffnen Was Sie diesen Teil erwarten Sie Code sollte in Ihrem css

tun

Entfernen dieser Teil des Codes .. Und dies nicht mein Problem .. Ich weiß nicht, was die dumm .. zu downvote während .not() eine richtige Antwort ist

Sie benötigen .not()

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

verwenden

und

$(".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>

Quelle

2017-05-24 11:21:59

dann funktioniert kein Akkordeon –

nicht() ist die Lösung, weiß nicht warum @ani_css akzeptiert es nicht als Antwort – Ejaz47

Passen Sie Ihren JavaScript-Code an. Die Umschaltfunktion erledigt die ganze Arbeit.

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

Quelle

2017-05-24 11:26:20 Gerard

Wie wäre es mit dem Schließen der anderen? – charlietfl

Bitte entfernen Sie die folgenden CSS

.active+.text { 
    display: block; 
}

und fügen Sie den Code unten angegebenen

.text.active{ 
    display: block; 
}

auch die Klasse "aktiv" add Block auf Standard

Quelle

2017-05-24 12:00:02 Sandhu

Einfacher Wechsel zu öffnen getan in Ihrem Javascript-Code und sein Arbeiten, wie Sie erwarteten:

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

Quelle

2017-05-24 12:06:39 Sachin

Ich hoffe, es wird Ihr Problem lösen.

$(".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 -->

Quelle

2017-05-24 12:22:02

Wie wiederhole ich mit jquery?

Antwort

Verwandte Themen