показать / скрыть с помощью jquery - PullRequest
Новая
       19

показать / скрыть с помощью jquery

1 голос
/ 09 декабря 2010

У меня проблемы со скрытием и показом тега p. Может ли кто-нибудь помочь мне с этим кодом. Что я Попытка сделать это заключается в том, что при нажатии кнопки скрытия содержимое скрыто. Затем, когда вы будете готовы показать содержимое, вы нажимаете кнопку показать. Я знаю, что вы можете использовать тумблер, но я не хочу этого делать 

<!DOCTYPE html>    <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>

1 Ответ

4 голосов
/ 09 декабря 2010

В настоящее время он не работает с несколькими содержание.

Это потому, что у вас есть дубликаты идентификаторов на вашей странице. Чтобы это исправить, используйте классы и выберите следующий div .slickbox из привязанного якоря: 

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400);
    return false;
});

.. и измените идентификаторы на классы, например ::10000 

<a class="slick-toggle" href="#">Toggle the box</a>
<div style="position:relative; outline: 1px dashed orange; padding:100px;">
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;">
        <h2> music nsme</h2>
        <p>This is the box that will be shown and hidden and togg </p>
    </div>
</div>
...