Wie kann ich einen Klick in das Dropdown-Menü JQuery hinzufügen?

Ich erstelle mein erstes Skript mit JQuery und um mich mit den Grundlagen zu testen versuche ich ein einfaches Menü Dropdown in JQuery. Der Code funktioniert perfekt, aber es gibt ein Problem, würde ich, wenn ich auf die Schaltfläche für die offene Text klicken Sie nochmals Wenn der Text geöffnet Wenn klicken Sie nochmals auf diese sollte in der Nähe sein, hier der Code:Wie kann ich einen Klick in das Dropdown-Menü JQuery hinzufügen?

$(".select1").click(function() { 
 
    $(".content1").css("display", "block"); 
 
}); 
 

 
$(".select2").click(function() { 
 
    $(".content2").css("display", "block");     
 
}) 
 

 
$(".select3").click(function() { 
 
    $(".content3").css("display", "block"); 
 
}) 
 

 
$(".select4").click(function() { 
 
    $(".content4").css("display", "block"); 
 
})

article { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="dropdown-wrapper"> 
 
    <p class="select1">Select 1</p> 
 
    <article class="content1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae mollitia aliquid quas doloremque, repudiandae vel odio nisi repellendus accusantium temporibus distinctio labore, debitis tenetur, in assumenda. Odio possimus pariatur, vitae!</article> 
 
    <p class="select2">Select 2</p> 
 
    <article class="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas iure, doloribus qui quasi est, quo obcaecati modi ab nesciunt pariatur a id rerum reprehenderit, beatae corrupti consequatur ut placeat ipsa!</article> 
 
    <p class="select3">Select 3</p> 
 
    <article class="content3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque voluptate beatae placeat nobis porro, id ipsum. Incidunt minima deserunt, delectus. Ad unde obcaecati natus quo excepturi, tempore consectetur odio explicabo.</article> 
 
    <p class="select4">Select 4</p> 
 
    <article class="content4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium ex ipsa dolor alias ratione repellat eos? Eveniet architecto officiis, veniam reiciendis animi, enim aperiam error dignissimos expedita laborum eius.</article> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-04-16 Blazed

Sie können Elemente mit .toggle() oder .toggleClass() ein- und ausblenden. Ich habe .toggleClass() gewählt, da es einfacher ist, in einem versteckten Zustand zu starten:

/** You need only one declaration using a common selector - class .select in this case **/ 
 
$(".select").click(function() { 
 
    $(this).next().toggleClass('visibile'); // if clicked toggle the class on the next element (the article) 
 
});

article:not(.visibile) { /** all articles that don't have the class visible, should be hidden **/ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="dropdown-wrapper"> 
 
    <p class="select">Select 1</p> 
 
    <article class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae mollitia aliquid quas doloremque, repudiandae vel odio nisi repellendus accusantium temporibus distinctio labore, debitis tenetur, in assumenda. Odio possimus pariatur, vitae!</article> 
 
    <p class="select">Select 2</p> 
 
    <article class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas iure, doloribus qui quasi est, quo obcaecati modi ab nesciunt pariatur a id rerum reprehenderit, beatae corrupti consequatur ut placeat ipsa!</article> 
 
    <p class="select">Select 3</p> 
 
    <article class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque voluptate beatae placeat nobis porro, id ipsum. Incidunt minima deserunt, delectus. Ad unde obcaecati natus quo excepturi, tempore consectetur odio explicabo.</article> 
 
    <p class="select">Select 4</p> 
 
    <article class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium ex ipsa dolor alias ratione repellat eos? Eveniet architecto officiis, veniam reiciendis animi, enim aperiam error dignissimos expedita laborum eius.</article> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-04-16 19:48:26

ich Ihren Code vereinfacht habe. Sie können dies mit slideToggle() tun, um den Artikel next() anzuzeigen/auszublenden.

$("p").click(function() { 
    $(this).next().slideToggle(); 
});

See it here

Quelle

2016-04-16 19:49:07

Wie kann ich einen Klick in das Dropdown-Menü JQuery hinzufügen?

Antwort

Verwandte Themen