ドロップダウンでreclickを追加する方法JQuery？

私はJQueryを使って最初のスクリプトを作成しています。基本についてはJQueryで簡単にメニューをドロップダウンしようとしています。完全にコードの作業が、問題があります、私はここで、私はオープンテキストのボタンをreclick場合、これは近いはずreclick場合はテキストが開いている場合ということだろうコード：ドロップダウンでreclickを追加する方法JQuery？

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

出典

2016-04-16 Blazed

.toggle()または.toggleClass()を使用して要素を表示および非表示にすることができます。それは隠された状態で起動する方が簡単ですので、私は、.toggleClass()を選択した：私はあなたのコードを簡素化しました

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

出典

2016-04-16 19:48:26

。 slideToggle()でこれを行うと、next()の記事を表示/非表示できます。

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

See it here

出典

2016-04-16 19:49:07

ドロップダウンでreclickを追加する方法JQuery？

答えて

関連する問題