的JQuery的slideToggle shoult效果基本show所有其它所示的容器

這是前人的精力發生的事情：的JQuery的slideToggle shoult效果基本show所有其它所示的容器

我點擊menue項目之一，該文本容器應滑落下來的時候我上其他克利克已經打開的容器向上滑動和點擊式容器向下滑動。但我怎麼嘗試「兄弟姐妹」，但沒有按我想要的方式工作。

，這就是多遠，我已經很

<style> 

.read_more, .read_it, .read_that, .read_this{ 
    color: black; 
    font-size: 20px; 
    font-weight:bold; 
    } 

.inhalt, .inhalt_it, .inhalt_this, .inhalt_that{ 
    display:none; 
    } 
li{ 
    display: inline; 
    list-style-type: none; 
    } 


</style> 
</head> 

<body> 

<a class="read_more">BTN 1</a> 
<div class="inhalt"> 
text 1 
</div> 

<ul> 
<li class="read_it">BTN 2</a></li> 
<li class="read_that">BTN 3</a></li> 
<li class="read_this">BTN 4</a></li> 
</ul> 
<div class="inhalt_it"> 
text 2 
</div> 
<div class="inhalt_that"> 
text 3 
</div> 
<div class="inhalt_this"> 
text 4 
</div> 


<script> 
    $('.read_more').click(function() { 
     $(this).nextAll('div.inhalt:first').slideToggle("slow").siblings('div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', '#F00F'); 

    }); 

    $('li.read_it').click(function(){ 
     $(this).nextAll('div.inhalt_it:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Yellow'); 

    }); 

    $('li.read_this').click(function(){ 
     $(this).nextAll('div.inhalt_this:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that').slideUp('slow').css('background', 'Blue'); 


    }); 

    $('li.read_that').click(function(){ 
     $(this).nextAll('div.inhalt_that:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Red'); 



    }); 
</script>

我tryed向固定這樣的順序問題

 <script> 
    // 
     $('.read_it').click(function(){ 
       $(this).siblings('div.inhalt, div.inhalt_prozesse, div.inhalt_recht').slideUp('slow', function(){ 
        $(this).nextAll('div.inhalt_it:first').slideToggle("slow").css('background', 'Yellow'); 
       }); 
    // 
      </script>

我怎樣才能做到這一點？！？
我已經說感謝所有幫助.....

我提出它可能不是最ellegent方式，但它的工作原理....
如果任何人能告訴我如何能夠提高我」會非常感謝全...

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 

<style> 
    .inhalt, .inhalt1, .inhalt2, .inhalt3{ 
     display: none; 
     } 

     .read1, .inhalt_1, .inhalt_2, .inhalt_3{ 
     color: black; 
     font-size: 20px; 
     font-weight:bold; 
     } 

     ul{ 
      display: inline; 
      list-style-type: none; 
      } 
      li{ 
       display: inline; 
      } 


</style> 

</head> 

<body> 

<a class="read1">BTN1</a> 
    <div class="inhalt"> 
     content.<br /> 
    </div> 
    <br /> 

<a class="inhalt_1">BTN2</a> 
<a class="inhalt_2">BTN3</a> 
<a class="inhalt_3">BTN4</a> 



    <div class="inhalt1"> 
     Some content1.<br /> 
    </div> 

    <div class="inhalt2"> 
     Some content2.<br /><br /> 
    </div> 

    <div class="inhalt3"> 
     Some content3.<br /> 
    </div> 
<script> 

$(document).ready(function(){ 

// BTN 1 begin 
    $('.read1').click(function(){ 
     if ($('div.inhalt1').css('display') == 'block'){ 
      $('div.inhalt1').slideUp('slow', (function(){ 
       $('div.inhalt').slideToggle('slow') 
      })) 
      } 
      else if($('div.inhalt2').css('display') == 'block'){ 
       $('div.inhalt2').slideUp('slow', (function(){ 
        $('div.inhalt').slideToggle('slow') 
       })) 
      } 
      else if($('div.inhalt3').css('display') == 'block'){ 
       $('div.inhalt3').slideUp('slow', (function(){ 
        $('div.inhalt').slideToggle('slow') 
       })) 
      } 
      else{ 
       $(this).nextAll('div.inhalt:first').slideToggle('slow'); 
       } 
       }); 
// BTN 1 end   

// BTN 2 begin  
     $('.inhalt_1').click(function(){ 
      if ($('div.inhalt').css('display') == 'block'){ 
       $('div.inhalt').slideUp('slow', (function(){ 
        $('div.inhalt1').slideToggle('slow') 
        })) 
       } 
       else if($('div.inhalt2').css('display') == 'block'){ 
        $('div.inhalt2').slideUp('slow', (function(){ 
         $('div.inhalt1').slideToggle('slow') 
         })) 
       } 
       else if($('div.inhalt3').css('display') == 'block'){ 
        $('div.inhalt3').slideUp('slow', (function(){ 
         $('div.inhalt1').slideToggle('slow') 
       })) 
       } 
       else{ 
        $(this).nextAll('div.inhalt1:nth(0)').slideToggle('slow'); 
        } 
        }); 
// BTN 2 end 

// BTN 3 begin 

    $('.inhalt_2').click(function(){ 
     if ($('div.inhalt').css('display') == 'block'){ 
       $('div.inhalt').slideUp('slow', (function(){ 
        $('div.inhalt2').slideToggle('slow') 
        })) 
       } 
       else if($('div.inhalt1').css('display') == 'block'){ 
        $('div.inhalt1').slideUp('slow', (function(){ 
         $('div.inhalt2').slideToggle('slow') 
         })) 
       } 
       else if($('div.inhalt3').css('display') == 'block'){ 
        $('div.inhalt3').slideUp('slow', (function(){ 
         $('div.inhalt2').slideToggle('slow') 
       })) 
       } 
       else { 
        $(this).nextAll('div.inhalt2:first').slideToggle('slow'); 
        } 
        }) 

// BTN 3 end 

// BTN 4 begin 

$('.inhalt_3').click(function(){ 
     if ($('div.inhalt').css('display') == 'block'){ 
       $('div.inhalt').slideUp('slow', (function(){ 
        $('div.inhalt3').slideToggle('slow') 
        })) 
       } 
       else if($('div.inhalt1').css('display') == 'block'){ 
        $('div.inhalt1').slideUp('slow', (function(){ 
         $('div.inhalt3').slideToggle('slow') 
         })) 
       } 
       else if($('div.inhalt2').css('display') == 'block'){ 
        $('div.inhalt2').slideUp('slow', (function(){ 
         $('div.inhalt3').slideToggle('slow') 
       })) 
       } 
       else { 
        $(this).nextAll('div.inhalt3:first').slideToggle('slow'); 
        } 
        }) 


// BTN 4 end 


}); 

</script>

來源

2010-07-27 zim

我創建了一個的jsfiddle這裏： http://jsfiddle.net/jn2Yb/。這是BTN的樣子嗎？如果不是，他們應該怎麼看，他們應該怎麼做？ – MvanGeest 2010-07-27 14:39:40

Hy MvanGeest BTN的外觀是正確的，BTN 1表現正確。 BTN應該做的是當我點擊其中一個opend內容應該slideUp，當它完成clickt內容應slideDown ..... – zim 2010-07-27 15:19:59

但爲什麼BTN的2,3,4彼此相鄰？這完全破壞了滑動效果（在我看來）。它們也是內聯的，所以這是行不通的......我不認爲我明白哪些內容在哪裏。 BTN 2的內容是否與BTN 1的內容相同？ – MvanGeest 2010-07-27 17:35:06

你的腳本不包括在jquery初始化函數中。你應該把你所有的腳本：

$(function(){ 
// Put your code here 
});

或

$(document).ready(function(){ 
// Put your code here 
});

來源

2010-07-27 14:44:05 Shaoz

HY Shaoz 這不是問題的腳本它自我的作品，但我不希望它的方式...... – zim 2010-07-27 15:00:43

我知道這是一個古老的條目，但我想我張貼我的答案呢。可能幫助某人。

有幾件事情，可能你的代碼加以改進。首先，因爲它看起來像所有的類都是唯一的，所以我建議使用ID，因爲它們更快。

通過鏈接到他們的哈希像這樣

<nav> 
    <li><a href="#Inhalt1">btn1</a></li> 
</nav>

然後JavaScript的隱藏內容和的slideToggle點您的LIS各自的內容中選擇一個你點擊

var content = ("#inhalt1, #inhalt2, #inhalt3"); 
    $(content).hide(); 
    $("nav a").click(function(e){ 
    e.preventDefault(); 
    $(content).hide(); 
    $($(this).attr("href")).slideToggle();

來源

2011-05-12 05:38:02

的JQuery的slideToggle shoult效果基本show所有其它所示的容器

回答

相關問題