需要幫助修改網頁上的基於JavaScript的手風琴盒

以下是website的視圖。需要幫助修改網頁上的基於JavaScript的手風琴盒

首先，我對JavaScript很陌生，所以這就是爲什麼我要推遲到這裏的社區。

我在網站的第一頁中央欄中有一個簡單的手風琴盒。它工作得很好，但我希望手風琴的「2014年演出」部分在頁面加載時打開。否則，首先，標題看起來是空的，直到被點擊。那行不通！注：我打算在手風琴的每個頭部旁邊增加一些向上/向下的箭頭，讓它更加明顯，實際上它是一部手風琴。

下面是HTML：

<div class="accordionButton"> 
    <h1>2014 Shows</h1> 
</div> 
<div class="accordionContent"> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
</div> 
<div class="accordionButton"> 
    <h1>2013 Shows</h1> 
</div> 
<div class="accordionContent"> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
</div>

相應的CSS：

.accordionButton { 
    width: 320px; 
    float: left; 
    cursor: pointer; 
} 

.accordionContent { 
    width: 320px; 
    float: left; 
    display: none; 
}

以及相應的腳本：

$(document).ready(function() { 

    //ACCORDION BUTTON ACTION 
    $('div.accordionButton').click(function() { 
    //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK 
     if ($('div.accordionContent').hasClass('openDiv')) { 
      $('div.accordionContent').slideUp('normal'); 
      $(this).next().removeClass('openDiv'); 
     } 
     else { 
      $('div.accordionContent').slideUp('normal'); 
      $(this).next().slideDown('normal'); 
      $(this).next().addClass('openDiv'); 
     } 
    }); 
    //HIDE THE DIVS ON PAGE LOAD 
    $("div.accordionContent").hide(); 

});

來源

2014-01-14 mateikav

你這個代碼摺疊所有的div：

$("div.accordionContent").hide();

更改選擇隱藏所有除了第一個：

$("div.accordionContent").slice(1).hide();

進一步的幫助，請參見CSS Reference和Slice。

來源

2014-01-14 21:02:52 lxe

這是有道理的，但它不起作用。我需要指定哪一個是第一個孩子，在它工作之前？這可能是一個愚蠢的問題......就像我說的，Java對我來說是新的。 – mateikav

@mateikav我改正它使用'.slice'來代替。它不起作用，因爲div不是第一個孩子，它有它之前的標題。 – lxe

您應該重構此代碼以顯式調用'div'，因爲這是Sizzle DOM對象分析器中不必要的調用。（例如'$（'。accordionContent'）' – acconrad

聲明爲display：none的CSS;開始做些什麼分開的任務。如果我們擁有JavaScript並且將會通過JavaScript來調整可見性，那麼我們應該使用JS來完成。如果沒有JavaScript，那麼用戶不會錯過任何信息。

風格，小的變化：

.accordionButton { 
     width: 320px; 
     float: left; 
     cursor: pointer; 
    } 

    .accordionContent { 
     width: 320px; 
     float: left; 
    }

否則，我改變了你的HTML你div的聲明，我們希望在HTML中是可見的，以便更容易維護和佈局。

HTML體內：

<div class="accordionButton"> 
     <h1>2014 Shows</h1> 
    </div> 
    <div class="accordionContent openDiv"> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
    </div> 

    <div class="accordionButton"> 
     <h1>2013 Shows</h1> 
    </div> 
    <div class="accordionContent closedDiv"> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
    </div>

然後我就收緊了JavaScript和，因爲只有兩個元素，或者單擊「按鈕」就會顯示一個隱藏其他。但現在應該更容易將這種行爲改變成任何你喜歡的東西。

和腳本：

//ACCORDION BUTTON ACTION 
    $('.accordionButton').click(function() { 
     //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK 
     $('.accordionContent.openDiv').slideUp('normal', function() { 
      $(this).removeClass('openDiv').addClass('closedDiv'); 
     }); 
     $('.accordionContent.closedDiv').slideDown('normal', function() { 
      $(this).removeClass('closedDiv').addClass('openDiv'); 
     }); 
    }); 

    //HIDE THE DIVS ON PAGE LOAD 
    $(".accordionContent.closedDiv").eq(0).hide();

來源

2014-01-14 22:00:11 kellycode

感謝您的廣泛答覆。我正在嘗試你的想法，現在手風琴全部開啓並保持這種狀態。 – mateikav

檢查控制檯日誌，聽起來好像在某個地方出現了JavaScript錯誤，這正在破壞腳本 – kellycode

我想出了另一個解決方案並提供了一些幫助。會發布它，我認爲它比我最初的風格容易一些。 – mateikav

解決的辦法是比我最初的想法更優雅。它涉及改變整個方法。

HTML：

<div id="accordion"> 
    <h1 class="accordion-toggle">2014 Shows<img style="vertical-align:middle; padding-left:5px;" src="media/down_accordion.gif" width="10px" height="5px" /></h1> 
     <div class="accordion-content default"> 
      <p>AUG 1-3 Fire &amp; Water Music Festival<br />Lac Du Bonnet, MB | Time TBA</p> 
      <p>MAR 19 black-eyed SUZIE Studio w/ West My Friend<br />Minitonas, MB | 7:00PM</p> 
      <p>JAN 1 New Year's House Concert<br />Gilbert Plains, MB | 8:00PM</p> 
     </div> 
    <h1 class="accordion-toggle">2013 Shows<img style="vertical-align:middle; padding-left:5px;" src="media/down_accordion.gif" width="10px" height="5px" /></h1> 
     <div class="accordion-content"> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
     </div> 
</div>

CSS：

.accordion-toggle { 
    cursor: pointer; 
} 

.accordion-content { 
    display: none; 
} 

.accordion-content.default { 
    display: block; 
}

的Java：

<script type="text/javascript"> 
    $(document).ready(function($) { 
     $('#accordion').find('.accordion-toggle').click(function(){ 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

     }); 
    }); 
</script>

這似乎很好地工作！感謝所有的投入。你的想法讓我研究了一些新的東西。對我來說Java仍然有點陌生。

來源

2014-01-14 22:58:11 mateikav

需要幫助修改網頁上的基於JavaScript的手風琴盒

回答

相關問題