Jquery显示无默认不工作答案

【问题标题】：Jquery display none default not workingJquery显示无默认不工作
【发布时间】：2014-11-22 17:01:05
【问题描述】：

我基本上想要一个管理工具栏，它会有一个可以点击显示的按钮（adminbarplus），点击它会向下滑动工具栏并向上滑动 adminbarplus，因为管理工具栏有自己的隐藏按钮（adminbarminus） .但是，我需要默认隐藏该栏，并且添加内联 HTML 以显示 none 不起作用，因为它被替换为 display: block 默认情况下。

这是我的html：

<div class="row adminbar" id="adminbar" style="display: none;">
    <div class="row adminbaroverlay">
            <div class="large-2 columns">
                <div class="row valign-middle">
                    <div class="large-12 columns content2 adminbarsidebar">
                        <%= image_tag('admintitle.png') %>
                    </div>
            </div>
        </div>
        <div class="large-9 columns">
            <div class="row valign-middle">
                <div class="large-12 columns adminbarsidebar">
            <p class="margin0b padding0b margin0t padding0t"><span class="adminbutton">Manage Users</span>
            <span class="adminbutton">Manage Branches</span>
            <span class="adminbutton">Manage News</span></p>                    
                </div>
            </div>
        </div>
        <div class="large-1 columns adminarrow" id="adminbarminus">
            <div class="row valign-middle">
                <div class="large-12 columns adminbarsidebar text-center">
                    <a href="#"><%= image_tag('minusicon.png') %></a>
                </div>
            </div>
        </div>
    </div>
</div>

<span class="adminbarplus">ADMIN BAR</span>

这是我的 jquery：

             $("#adminbarminus").click(function(){
                $("#adminbar").slideUp();
                $(".adminbarplus").slideDown();
             });

             $(".adminbarplus").click(function(){
                $("#adminbar").slideDown();
                $(".adminbarplus").slideUp();
             });

非常感谢您的帮助，谢谢。

【问题讨论】：

它工作得很好，在这段代码中没有问题 - jsfiddle.net/5eLd4L2h
是的，隐藏的特殊性不应该有其他东西覆盖它 - 覆盖来自哪里？你用浏览器检查器看了吗？
这里可能缺少信息 - 这是否也在使用引导程序或其他类似的框架？
@DannyStaple 基金会 4

标签： jquery html

【解决方案1】：

         $("#adminbar").click(function(){
            $("#adminbar").slideUp();
            $(".adminbarplus").slideDown();
         });

         $(".adminbarplus").click(function(){
            $("#adminbar").slideDown();
            $(".adminbarplus").slideUp();
         });

你输入了错误的ID....... http://jsfiddle.net/z817oy53/

【讨论】：

【解决方案2】：

强烈建议您不要将 jquery 用于动画或类似的东西，只需使用 CSS3 过渡或动画即可，并且仅将 jQuery 用于切换类。

<div id="bar">
    <span class="minus">minus</span>
</div>

<span class="plus">plus</span>

<style>
    #bar{
        transition: transform .5s ease;
        transform: translateY(-100%);
    }
    #bar.isActive{
        transform: translateY(0%);
    }
</style>

<script>

   $(function(){

       var bar = $("#bar"),
           plus = $(".plus"),
           minus = $(".minus");

       plus.click(function(){
           bar.addClass("isActive");
       });
       minus.click(function(){
           bar.removeClass("isActive");
       });

   });
</script>

【讨论】：