div切换脚本

时间:2012-08-24 16:31:51

标签: javascript jquery

对不起,我没有解释得很清楚,我已经在jsfiddle设置了我的...

http://jsfiddle.net/greggb/Ya2wX/

基本上我要做的就是在第一个div打开之后这样做,第二个标签锚(两个)将在打开下一个div之前关闭第一个div?

谢谢,Gregg。

 $(document).ready(function() {
      $('.example2').hide().before('');
      $('a#toggle-example2').click(function() {
           $('.example2').slideToggle(500);
           return false;
      });
 });

 $(document).ready(function() {
      $('.item1').hide().before('');
      $('a#toggle-item1').click(function() {
           $('.item1').slideToggle(500);
           return false;
      });
 });

4 个答案:

答案 0 :(得分:1)

$('a#toggle-item1').click(function() {

id应唯一标识页面中的一个元素。 。 。 。如果您使用ID'切换项1'用于其他div,这将无效。 。 。 .try使用唯一ID或类

答案 1 :(得分:0)

 $(document).ready(function() {
      $('.item1').hide();
      $('.item1').click(function() {
           $('.item1').not(this).hide();
           $(this).slideToggle(500);
           return false;
      });
 });

答案 2 :(得分:0)

toggle_item元素上设置<a>课程,并执行:

<a href="#" class="toggle-item">link 1</a>
<div class="item">content 1</div>

<a href="#" class="toggle-item">link 2</a>
<div class="item">content 2</div>

JS:

$(function() {
      $('.item').hide();
      $('a.toggle-item').click(function() {
           $(this).next('.item').slideToggle(500);
           return false;
      });
});

FIDDLE

答案 3 :(得分:0)

可能有一个较短的方法,但这应该有效(演示:http://jsfiddle.net/6N4kJ/13/):

// When item 1 is clicked           
$('#item1').click(function() {
    // if item 2 is visible
    if ($('.item2').is(':visible')) {
        // hide (toggle) item2, and when finished..
        $('.item2').slideToggle(500, function() {
            // toggle item1
            $('.item1').slideToggle(500);
        });
    // else, just hide item1
    } else {
        $('.item1').slideToggle(500);
    }
});