как сделать показать / скрыть кнопку переключения с помощью jquery - PullRequest
Новая
       25

как сделать показать / скрыть кнопку переключения с помощью jquery

2 голосов
/ 17 августа 2011

Привет. Я пытался сделать кнопку переключения показа / скрытия с помощью jquery, но я могу найти только те кнопки, которые показывают div, но ни одну из них, которые скрывают его

ниже - один из найденных мной примеров, который показываетdiv, но он не позволяет скрыть его, если вы не нажмете другую кнопку.Я хотел бы иметь возможность использовать ту же кнопку, чтобы показать и скрыть div.У меня есть несколько div-ов на моей странице, и я хотел бы использовать jquery вместо javascript. 

<html>
 <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){

        $(".buttons").click(function () {
        var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");
        });

      });
</script> 
     </head>
        <body>


 <div id="buttonsDiv"> 

  <input type="button" id="button1" class="buttons" value="div1"></input>
  <input type="button" id="button2" class="buttons" value="div2"></input>
  <input type="button" id="button3" class="buttons" value="div3"></input>
  <input type="button" id="button4" class="buttons" value="div4"></input>

  </div>

   <div>

     <div id="div1" style="display:none">
    Hello World
     </div>

     <div id="div2" style="display:none">
       Test
   </div>

        <div id="div3" style="display:none">
          Another Test
  </div>

     <div id="div4" style="display:none">
     Final Test
     </div>


         </div>


     </body>
    </html>

Ответы [ 8 ]

5 голосов
/ 17 августа 2011

Попробуйте это 

$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).slideToggle().siblings().hide("slow");
});
4 голосов
/ 17 августа 2011

Еще проще использовать собственную функцию переключения элемента управления. 

$('.toggleButtons').click(function()
{
    $('control1, control2, ...').toggle();
});
1 голос
/ 17 августа 2011

Демо 

$(document).ready(function(){
    $(".buttons").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
    });
});

Это должно сделать это.

РЕДАКТИРОВАТЬ:

кредит для переключения идет на @AtoMerZ.У него это было первым.

1 голос
/ 17 августа 2011

Переключите ваш скрипт с этим: 

<script>
    $(document).ready(function(){
        $(".buttons").click(function () {
           $("#buttonsDiv div").hide()
          var divname= this.value;
          $("#"+divname).show();
        });
    });
</script>
0 голосов
/ 17 августа 2011

Предполагая, что вы хотите, чтобы все остальные div были скрыты при отображении нового: 

$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });

JS Fiddle demo .

0 голосов
/ 17 августа 2011

Вы можете использовать метод toggle для отображения и скрытия элемента.Это покажет / спрячет каждый div отдельно: 

$(".buttons").click(function () {
  $("#" + this.value).toggle("slow");
});
0 голосов
/ 17 августа 2011

Метод jQuery .toggle () должен помочь вам: 

$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).toggle();
});

Источник: http://api.jquery.com/toggle/

0 голосов
/ 17 августа 2011

Это довольно простой скрипт для создания: 

$('.buttons').click(function()
{
    var elementToShowOrHide = $('#' + $(this).val());

    if(elementToShowOrHide.is(':visible'))
       elementToShowOrHide.hide();
    else
       elementToShowOrHide.show();
});

Каждый щелчок по кнопке будет переключать видимость другого элемента.

...