Sliding/Hiding Divs問題

因此，我試圖爲我的網站的項目部分製作一種手風琴，並且遇到了一個非常奇怪的問題（或者我可能真的很累）。第一次單擊以展開選擇可以正常工作，但當再次單擊標題以返回到原始狀態時，先前展開的標題的內容將隱藏起來。此外，再次單擊相同的標題以在第一個包含的邊框消失後隨時展開。Sliding/Hiding Divs問題

要看到我的行動問題恰恰到我的網站：

http://cole.quinnchrzan.com/cc2

，看到自己通過點擊項目部分。

如果你只是想在這裏看看它的代碼是：

$(document).ready(function() { 
var sign = 1; 
    $('#projects > div:not(.header)').on('click', function() { 
     if (sign == 1) { 
      $(this).css('border-bottom', 'none'); 
      $(this).children().slideDown(400); 
      $(this).siblings().slideUp(400); 
     } 
     else { 
      $(this).css('border-bottom', '1px solid black'); 
      $(this).children().slideUp(400); 
      $(this).siblings().slideDown(400); 
      $(this).css({ 
       'height': '29px', 
       'z-index': '2' 
      }); 
     } 
     sign = sign*-1; 
    }); 
});

和HTML：

<section id="projects"> 
    <div class="header">Websites</div> 
    <div><a href="#">Saia LTL, Inc.</a> 
     <div></div> 
    </div> 
    <div><a href="#">Insurance House</a></div> 
    <div><a href="#">Scandinavian Collectors Club</a></div> 
    <div><a href="#">Casey Sills Photography</a></div> 
    <div class="header">Personal Projects</div> 
    <div><a href="#">cTV</a></div> 
    <div><a href="#">PoE DPS calculator</a></div> 
    <div><a href="#">tSlide</a></div> 
</section>

我增加了一些額外的CSS 'height': '29px''z-index': '2'，試圖讓受影響標題顯示，但它只是創建一個空的div。沒有這個CSS div沒有高度。

來源

2013-04-01 tenub

我剛纔提到的，你會影響你的孩子以及他們得到隱藏 – pfried

屬性我畢竟太累了。只需要添加一個div選擇器到children（）！ – tenub

你可以自己回答你的問題並將其標記爲已解決 – pfried

這是一個愚蠢的錯誤。我只是忘記只選擇div孩子時隱藏/顯示，所以a孩子仍然隱藏或什麼。換句話說，我改變了這個：

$(this).children()

這樣：

$(this).children('div')

感謝pfried的指示！

來源

2013-04-01 09:46:49 tenub

-1

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script>$(document).ready(function() { 
    var sign = 1; 
     $('#projects > div.header').on('click', function() { 
      if (sign == 1) { 
       $(this).css('border-bottom', 'none'); 
       $(this).children().slideDown(400); 
       $(this).siblings().slideUp(400); 
      } 
      else { 
       $(this).children().slideUp(400); 
       $(this).siblings().slideDown(400); 
       $(this).css({ 
        'height': '29px', 
        'z-index': '2' 
       }); 
      } 
      sign = sign*-1; 
     }); 
     $('div.slide').click(function(){ 
      $('div.cont').slideToggle('slow'); 
     }); 
    }); 
    </script> 
    <style> 
     div.cont{ display: none;} 
    </style> 
</head> 
<body> 
    <div id="projects"> 
     <div class="header">Websites</div> 
      <div class='slide'><a href="#">Saia LTL, Inc.</a> 
       <div class='cont'></div> 
      </div> 
      <div class='slide'><a href="#">Insurance House</a><div class='cont'></div></div> 
      <div class='slide'><a href="#">Scandinavian Collectors Club</a><div class='cont'></div></div> 
      <div class='slide'><a href="#">Casey Sills Photography</a><div class='cont'></div></div> 
     <div class="header">Personal Projects</div> 
      <div class='slide'><a href="#">cTV</a><div class='cont'></div></div> 
      <div class='slide'><a href="#">PoE DPS calculator</a><div class='cont'></div></div> 
      <div class='slide'><a href="#">tSlide</a><div class='cont'></div></div> 
    </div> 
</body>

我只是想添加一個類來的兄弟姐妹表示他們專門----是u的樣子，我很高興或什麼特別否則請評論我-----三江源

來源

2013-04-01 08:44:10

它不起作用，結果與問題相同。 –

對不起老闆，試試這個，它會幫助我忘記粘貼原來的編輯代碼，對不起（'＃projects> div：not（.header）'）。（'click'，function（）to $（' #projects> div：header'）。on（'click'，function（） –

但它不工作，請複製 - >從上面的代碼片段粘貼你的代碼，然後檢查它我已經試過在FF和鉻。 –

試試這個。

現場演示here

HTML

<section id="projects">PROJECTS 
    <div class="header">Websites</div> 
    <div><a href="#">Saia LTL, Inc.</a></div> 
    <div><a href="#">Insurance House</a></div> 
    <div><a href="#">Scandinavian Collectors Club</a></div> 
    <div><a href="#">Casey Sills Photography</a></div> 
    <div class="header">Personal Projects</div> 
    <div><a href="#">cTV</a></div> 
    <div><a href="#">PoE DPS calculator</a></div> 
    <div><a href="#">tSlide</a></div> 
</section>

的JavaScript

var sign = 1; 
$('#projects > div:not(.header)').on('click', function() { 
    if (sign == 1) { 
     $(this).css('border-bottom', 'none'); 
     $(this).children().slideDown(400); 
     $(this).siblings().slideUp(400); 
    } 
    else { 
     $(this).css('border-bottom', '1px solid black'); 
     $(this).siblings().slideDown(400); 
     $(!$(this).children(":first")).slideUp(400); 
    } 
    sign = sign*-1; 
});

------------------ -------------------------------------------------- ------------------------------------------------- ---------------

替代的解決方案

現場演示here

HTML

<section id="projects">PROJECTS 
    <div class="header">Websites</div> 
    <div><a href="#" class="ShowThis">Saia LTL, Inc.</a></div> 
    <div><a href="#" class="ShowThis">Insurance House</a></div> 
    <div><a href="#" class="ShowThis">Scandinavian Collectors Club</a></div> 
    <div><a href="#" class="ShowThis">Casey Sills Photography</a></div> 
    <div class="header">Personal Projects</div> 
    <div><a href="#" class="ShowThis">cTV</a></div> 
    <div><a href="#" class="ShowThis">PoE DPS calculator</a></div> 
    <div><a href="#" class="ShowThis">tSlide</a></div> 
</section>

的JavaScript

var sign = 1; 
$('#projects > div:not(.header) > .ShowThis').on('click', function() { 
    if (sign == 1) { 
     $(this).css('border-bottom', 'none'); 
     $(this).children().slideDown(400); 
     $(this).parent().siblings().slideUp(400); 
    } 
    else { 
     $(this).parent().css('border-bottom', '1px solid black'); 
     $(this).parent().siblings().slideDown(400);   
     $(this).children().slideUp(400); 
    } 
    sign = sign*-1; 
});

來源

2013-04-01 09:24:37

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> 
    <script> 
    $(document).ready(function() { 
    $('div.header div.slide').css('display','none'); 
     $('div.header').toggle(
      function(){$('div.header').hide('fast'); $(this).show('slow'); $('div.slide').css('display','block');}, 
      function(){$('div.slide').css('display','none'); $('div.header').show('fast');}); 
    }); 
    $(document).ready(function(){ 
     var text = $('div.cont'); 
     $('div.slide').toggle(
      function(){$('div.slide').hide('fast'); $(this).show('slow'); $('div.cont').css('display','block');}, 
      function(){ $('div.cont').css('display','none'); $('div.slide').show('fast');}); 
    }) 
    </script> 
    <style> 
     .off{display: none;} 
     .on{ display: block;} 
     div.cont{ display: none;} 
     .slide{ display:none;} 
    </style> 
</head> 
<body> 
    <div id="projects"> 
     <div class="header">Websites 
      <div class='slide'><a href="#">Saia LTL, Inc.</a> 
       <div class='cont'>a;dasndiasfhnip</div> 
      </div> 
      <div class='slide'><a href="#">Insurance House</a><div class='cont'>dasndiasfhnip</div></div> 
      <div class='slide'><a href="#">Scandinavian Collectors Club</a><div class='cont'>dasndiasfhnip</div></div> 
      <div class='slide'><a href="#">Casey Sills Photography</a><div class='cont'>dasndiasfhnip</div></div></div> 
     <div class="header">Personal Projects 
      <div class='slide'><a href="#">cTV</a><div class='cont'>dasndiasfhnip</div></div> 
      <div class='slide'><a href="#">PoE DPS calculator</a><div class='cont'>dasndiasfhnip</div></div> 
      <div class='slide'><a href="#">tSlide</a><div class='cont'>dasndiasfhnip</div></div></div> 
    </div> 
</body>

我寧願這只是一個嘗試

來源

2013-04-02 04:48:37

這將幫助你更多，如果你喜歡的其他東西---只是添加爲評論，請複製這個完整的代碼，並嘗試確定 –

Sliding/Hiding Divs問題

回答

相關問題