手風琴腳本衝突

這裏是手風琴的DEMO。它在小提琴中工作正常，但是當我將代碼複製到html文件時，它是無聊的工作。手風琴腳本衝突

下面是HTML文件代碼

編輯HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="horizontalaccordion.css" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> 
</head> 

<body> 


<div class="horizontalaccordion"> 
<ul> 
    <li> 
     <h3>Heading 1</h3> 
     <div>Content For Panel 1.</div> 
    </li> 
    <li> 
     <h3>Heading 2</h3> 
     <div>Content For Panel 2.</div> 
    </li> 
    <li> 
     <h3>Heading 3</h3> 
     <div>Content For Panel 3.</div> 
    </li> 
    <li> 
     <h3>Heading 4</h3> 
     <div>Content For Panel 4</div> 
    </li> 
</ul> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
$('h3','.horizontalaccordion ul li').on('click',function() { 
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover'); 
}); 
}); 
</script> 


</body> 
</html>

來源

2012-08-23 Sowmya

，如果你刪除一些特殊charecters形成一些行它的工作原理。在vim等一些真正的文本編輯器中打開你的html文件，你會看到。我在vim中看到類似<200b>符號的東西，如果我刪除它們，那麼它工作正常。

只需複製此：

<!DOCTYPE html> 

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" href="horizontalaccordion.css" 
    type="text/css" /> 
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> 
    </head> 

    <body> 
    <div class="horizontalaccordion"> 
     <ul> 
     <li> 
      <h3>Heading 1</h3> 
      <div>Content For Panel 1.</div> 
     </li> 
     <li> 
      <h3>Heading 2</h3> 
      <div>Content For Panel 2.</div> 
     </li> 
     <li> 
      <h3>Heading 3</h3> 
      <div>Content For Panel 3.</div> 
     </li> 
     <li> 
      <h3>Heading 4</h3> 
      <div>Content For Panel 4</div> 
     </li> 
     </ul> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('h3', '.horizontalaccordion ul li').on('click', function() { 
      $(this).closest('li').toggleClass('hover').siblings().removeClass('hover'); 
     }); 
     }); 
    </script> 
    </body> 
</html>

來源

2012-08-23 09:42:15

非常感謝。你能幫我把內容跳到標題的左邊嗎？如果是開店右側 – Sowmya

那不起作用 – Sowmya

看到點擊李項時，它會打開右側的內容div。但是我需要將內容div分配給li項目的左側 – Sowmya

可能是你的CSS文件沒有正確加載，請確保您的.css文件是靠近你的.htm文件，如果不嘗試下載.js文件和將src更改爲下載的位置。除此之外，我沒有看到任何問題

來源

2012-08-23 09:46:15 Navin

手風琴腳本衝突

回答

相關問題