单击菜单图像时未显示侧菜单答案

【问题标题】：Side menu isn't showing up when clicked on menu image单击菜单图像时未显示侧菜单
【发布时间】：2015-08-27 12:57:27
【问题描述】：

我编写了一个代码，单击菜单图像后将显示侧菜单。它的代码是给定的here.我为此使用jQuery：

$(document).ready(function () {
    $('#logoDiv, #pageTitle').click(function () {
        if (!$("#searchMenu").is(':visible')) {
            $('#searchMenu').show('slide', 'left', 300);
        } else {
            $('#searchMenu').hide('slide', 'left', 300);
        }
    });
}

但searchMenu 是一个侧边菜单，在单击菜单图像时没有显示。我该如何解决？

【问题讨论】：

我已经添加了一个小提琴，请正确检查问题。如果你错过了，这里是 jsfiddle 链接：jsfiddle.net/6uepm0rq
那我错了！！这里也意味着，在下面！所以我错过了！道歉！
如果你打开你的开发者控制台，它应该会说：Uncaught SyntaxError: missing ) after argument list file.js:9
@Ajay 我更新了我的答案
@Sathish：查看我的评论

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

你在准备函数结束时缺少)

你需要插入 jquery ui 来获得缓动效果

试试这个吧！，！

$('#logoDiv, #pageTitle').click(function () {
  if (!$("#searchMenu").is(':visible')) {
    $('#searchMenu').show('slide', 'left', 300);
  } else {
    $('#searchMenu').hide('slide', 'left', 300);
  }
});

#logoDiv {
    width: 52px;
    float: left;
    padding-top: 1.5%;
    padding-left: 4%;
    color: white;
    background-color: #FFA500;
    height: 50px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
#pageLogo {
    display: block;
    flex-flow: column nowrap;
    height: 67%;
    justify-content: center;
    width: 14%;
}
#pageTitle {
    background-color: #FFA500;
    height: 50px;
    padding-top: 1%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-right: 22%;
}
#inheader {
    font-size: 24px;
    color: #fff;
}
.mainDiv {
    width: 100%;
    justify-content: center;
    padding: 1%;
}
#user {
    /*display: flex;
    flex-flow: column;
    justify-content: center;*/
    color: #fff;
    text-align: center;
    font-size: 18px;
}
#searchMenu {
    position: absolute;
    top: 9%;
    z-index: 10;
    display: none;
    height: 80%;
    overflow-y: auto;
    padding: 0px;
    min-width: 250px;
    background-color: transparent;
}
#searchMenu >.list-group >.list-group-item {
    float: none;
    min-width: 150px;
    background-color: #201423;
    ;
    border: 1px solid #CCC;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
    <div id="headDiv" role="banner">
        <div id="logoDiv"> <span id="pageLogo"><img src="images/index_menu_active_phone.png" id="logo"></span>

        </div>
        <div id="pageTitle" class="container-fluid">
            <div class="center-block">
                <img src="images/cart.png" class="img-rounded" alt="I" width="30" height="30" /> <span style="font-family: 'customfont';" id="inheader">Instore</span>

            </div>
        </div>
    </div>
    <div class="container mainDiv">
        <div id="searchMenu" class="col-xs-4">Helloiudhfskjdzgfsiukydhfsiuejhgfsiudjh</div>
    </div>

希望对你有帮助:)

【讨论】：

嗯......它在那个jsfiddle中工作，但不在我的代码中

【解决方案2】：

你的 jQuery 函数的结尾是错误的。

See Working Jsfiddle

代码：

    $(document).ready(function () {
    $('#logoDiv, #pageTitle').click(function () {
        if (!$("#searchMenu").is(':visible')) {
            $('#searchMenu').show('slide', 'left', 300);
        } else {
            $('#searchMenu').hide('slide', 'left', 300);
        }
    });
});

【讨论】：

有趣...它在那个 jsfiddle 中工作，但不在我的代码中
确保 jsfiddle 和你的代码完全一样。你包括 jQuery
我的代码有点不同。 searchMenu 是一个 ID，它与名为 menu.html 的外部 html 页面相关联，当单击菜单图像时应该从左侧滑动。

【解决方案3】：

您的代码是正确的。只需包含 jQuery UI 库。要显示滑动和其他效果，您需要 jQuery UI 库。 //code.jquery.com/ui/1.11.4/jquery-ui.js

这里正在处理您的代码。（您的小提琴中缺少括号）

Working Fiddle

这个插件扩展了 jQuery 的内置 .show() 方法。如果 jQuery UI 库没有加载，调用 .show() 方法可能不会直接失败，因为该方法仍然存在。但是，不会发生预期的行为。 .hide() 方法也是如此。

【讨论】：