Как добавить 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?

ответ

Смежные вопросы