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

How can I modify my jQuery to update html on a toggle button that is activated differently?

本文关键字：方式 激活 html 按钮 更新 何修改 修改 jQuery 我的      更新时间：2023-09-26

我在页面上有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>
为什么

不更改单击按钮上的文本？您可以将此代码添加到单击函数中

        $(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/

相关文章：