如何修改我的jQuery以更新以不同方式激活的切換按鈕上的html？

Question

我在頁面上有jQuery滑動div，可使用每個滑塊上的按鈕進行切換。 單擊按鈕后，內容將向下滑動，並且按鈕上的文本將從“查看更多”更改為“關閉”。 再次單擊該按鈕時，內容將向上滑動，並且按鈕上的文本將更改回“查看更多”。 我在下面發布的jQuery可以實現此功能。

現在，我想讓其中一個滑塊在URL中包含哈希標記時自動向下滑動。 我用下面的代碼來工作。 在此自動滑動過程中，觸發按鈕上的文本將更改為“關閉”，這是我想要的，但是當我單擊按鈕向上滑動時，文本不會變回“查看更多”。 然后，當我單擊切換按鈕時，它再次開始更改按鈕上的文本，但是這次是從“關閉”而不是“查看更多”開始的，因此與之前的更改相反。 那有意義嗎？ 哈哈。

有什么想法可以設置jQuery，以便在哈希自動打開后單擊“關閉”按鈕時，它將文本更改為“查看更多”嗎？ 謝謝你的幫助

    <script language="javascript">
 $(document).ready(function() {

        $('#toggleButton1').click(function() {$('#toggleSection{row_count}').slideToggle('slow', function() {
         // Animation complete.
            });
        });
            $('#toggleButton1').toggle(
                function() {$('#toggleButton1').html('Close');
            },
                function() {$('#toggleButton1').html('View More');
           });

        {/facility_sections}
        {/exp:channel:entries}

        if (window.location.hash) {
            $('#toggleSection1').slideToggle('slow');
            $('#toggleButton1').html('Close');}
});
</script>

Answer 1

為什么不更改單擊按鈕上的文本？ 您可以將此代碼添加到單擊功能

        $(document).ready(function() {
           $('#toggleButton1').click(function() {

           var buttonValue = $(this).val();
           switch(buttonValue)
           {
             case 'Close':
              buttonValue = 'View More';
              $('#toggleSection1').hide('slow');
              $('#toggleSection2').show('slow');
              break;
             case 'View More':
              $('#toggleSection1').show('slow');
              $('#toggleSection2').hide('slow');
              buttonValue = 'Close';
              break;
          }
          $(this).val(buttonValue);
   });
});

這是HTML：

<div id='toggleSection1' style='display:none'>toggle section 1</div>
<div id='toggleSection2' style='display:none'>toggle section 2</div>

<input type='button' id='toggleButton1' value='View More' />​

另一個選擇是擁有一個布爾值，該值指示它是否關閉，因此只需聲明該變量即可訪問

var isClose = false;

這是一個簡單的代碼，您可以看一下http://jsfiddle.net/2R9yE/11/