Функция с DIV Toggle Specification - PullRequest
Новая
       4

Функция с DIV Toggle Specification

2 голосов
/ 10 ноября 2011

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

<style>
  div { background:#def3ca; margin:3px; width:80px; 
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
<script>
$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    /* use callee so don't have to name the function */
    $(this).next("div").show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});

</script>

Ответы [ 3 ]

0 голосов
/ 10 ноября 2011

Я думаю, что проблема в том, что вы снова показываете в своей функции обратного вызова на #showr и, нажимая на #hidr, вы просто скрываете все div. Посмотрите на эту скрипку, которая, кажется, делает то, что вам нужно:

http://jsfiddle.net/VdUdE/

По сути, я просто выбираю первый / последний скрытый / видимый элемент в зависимости от того, на какую кнопку вы нажимаете, и показывает / скрывает его. Код: 

$("#showr").click(function () {
    $(this).siblings("div:hidden:first").show("fast");

});
$("#hidr").click(function () {
    $(this).siblings("div:visible:last").hide("fast");
});
0 голосов
/ 10 ноября 2011

И это вы ищете? 

<style>
  div { background:#def3ca; margin:3px; width:80px; 
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div id="1">Hello 3,</div>

  <div id="2">how</div>
  <div id="3">are</div>
  <div id="4">you?</div>
<script>
    var Counter = 0;
$("#showr").click(function () {
    Counter = Counter + 1;
    if(Counter > 4){ Counter = 4;}
  $('#'+Counter).show("fast", function () {

  });

});
$("#hidr").click(function () {
  $("#"+Counter).hide(2000);
     If(Counter > 0 ) 
         Counter = Counter -1;

});

</script>

тестовая ссылка http://jsfiddle.net/fPfvg/

0 голосов
/ 10 ноября 2011

Причина, по которой все исчезает, в том, что ты сказал это!В вашем CSS у вас есть правило для всех div s быть display: none; (невидимым).

Вместо этого вы хотите, чтобы только div, который вы пытаетесь скрыть изначально, имел встроенный стиль из display: none;.

т.е. измените свой CSS на: 

<style>
  div { background:#def3ca; margin:3px; width:80px; 
  float:left; text-align:center; }
  </style>

и ваши div-ы на: 

  <div style="display: none;">Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...