Question

我在jQuery中使用show和hide。基本上在我的页面上我有很多类（不是唯一的ID），它们都有显示和隐藏功能。但是，当选择下拉列表中的元素时，此内容也会隐藏并显示。

所以这意味着我设置了2个JavaScript函数。 1表示基于下拉列表显示和隐藏，另一个表示单击链接时显示和隐藏。

我遇到的问题是，如果使用.toggle打开或关闭div，则链接文本会旋转。如果我在下拉列表中选择选项1并打开div，则切换正常。但是，如果您在下拉列表中选择其他选项，然后切换链接文本，则会混淆并显示错误的文本。

我需要能够在使用下拉菜单时将切换重置为隐藏，但我过去几天一直在尝试，但似乎无法让它工作！

这是jquery代码：

第一个功能用于下拉显示和隐藏，第二个功能用于onclick显示和隐藏。

$(document).ready(function(){
    $('.box').hide();
    $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
    $('.redbox').hide();    


 });
});

$(document).ready(function(){

        var showText='Account details'; //Closed text variable
        var hideText='Account details'; //Open text variable

        var is_visible = false;

        $('.redbox').prev().append(' <a href="#" class="toggleLink copyLink" >'+showText+'</a>');
        $('.redbox').hide();

        $('a.toggleLink').click(function() {
            is_visible = !is_visible;
        $(this).html( (!is_visible) ? showText : hideText);

        $(this).parent().next('.redbox').toggle();

        return false;

    });
    });

HTML代码相当长，所以我稍微简化了一下，我们还加载了其他动态JavaScript属性。此代码用于下拉列表中的每个元素。

<a href="#" class="toggleLink copyLink"></a>.

<div class="redbox redbox_scroller_sav">

   <div id="coda-nav-1" class="coda-nav">
       <ul>
    <li><a href="#1">Pane 1</a></li>
    <li><a href="#2">Pane 2</a></li>
       </ul>
</div>

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
                Pane 1 text
        </div>
    </div>

    <div class="panel">
        <div class="panel-wrapper">
                Pane 2 text
        </div>
    </div>
</div><!-- /coda-slider -->

</div><!-- /redbox div -->

我希望有人能够帮助我！提前致谢

Answer 1

我不是完全确定您的代码在做什么，但.toggle()有一个可选参数。如果是true，您将显示选择;如果是false，则会隐藏选择。

在函数中重置.toggle

1 个答案: