Question

您好我的网站页面上有自举响应标签（使用来自www.github.com/vtimbuc/bootstrap-responsive-tabs的脚本），同时我使用自举响应式导航栏。在移动视图中，当我单击导航栏切换按钮时，菜单将打开，但如果我再次单击它将不会关闭。我把以下脚本设置为正确但菜单将在关闭后再次打开！

<script>

    $("button.navbar-toggle.btn-lg").click(function (event) {

        if ($("#mycollapse").hasClass("in")) {

            $("#mycollapse").hide();

        }
</script>

这是我的index.cshtml页面：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPage2.cshtml";


<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-3.1.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>



<section id="tabs-section">
    <ul id="myTab" class="my-nav nav nav-tabs  nav-justified responsive-tabs col-sm-12" style="padding:0;">
        <li class="active"><a href="#RegisterEditUsers" data-toggle="tab">ثبت نام و ویرایش کاربر</a></li>
        <li><a href="#RegisterEditCertificate" data-toggle="tab">اضافه و ویرایش مجوز</a></li>
        <li><a href="#RegisterEditNotification" data-toggle="tab">اضافه و ویرایش اطلاعیه</a></li>
        <li><a href="#RegisterEditGroup" data-toggle="tab">اضافه و ویرایش گروه کالا</a></li>
        <li><a href="#RegisterEditCommodity" data-toggle="tab">اضافه و ویرایش کالا</a></li>
        <li><a href="#ShowPreFactor" data-toggle="tab">پیش فاکتور</a></li>
        <li><a href="#ShowFactor" data-toggle="tab">فاکتور</a></li>

    </ul>
    <div class="tab-content col-md-12" >
        <div class="tab-pane fade in active" id="RegisterEditUsers">@Html.Partial("RegisterEditUsers")</div>
        <div class="tab-pane fade in" id="RegisterEditCertificate">@Html.Partial("RegisterEditCertificate")</div>
        <div class="tab-pane fade in" id="RegisterEditNotification">@Html.Partial("RegisterEditNotification")</div>
        <div class="tab-pane fade in" id="RegisterEditGroup">@Html.Partial("RegisterEditGroup")</div>
        <div class="tab-pane fade in" id="RegisterEditCommodity">@Html.Partial("RegisterEditCommodity")</div>
        <div class="tab-pane fade in" id="ShowPreFactor">@Html.Partial("ShowPreFactor")</div>
        <div class="tab-pane fade in" id="ShowFactor">@Html.Partial("ShowFactor")</div>
    </div>
</section>

@section Scripts {
    @Scripts.Render("~/Scripts/jquery.bootstrap-responsive-tabs.js")
    @Styles.Render("~/Content/bootstrap-responsive-tabs.css")
    @Styles.Render("~/Content/Site.css")

    <script type="text/javascript">
        $('.responsive-tabs').responsiveTabs({
            accordionOn: ['xs', 'sm']
        });
    </script>

这是layoutpage2，其中包含导航栏：

<!DOCTYPE html>


<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>@ViewBag.Title</title>

    <script src="~/Scripts/jquery-3.1.1.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <link href="~/Content/style.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/StyleSheet.css" rel="stylesheet" type="text/css" />

</head>
<body dir="rtl">

        <div class="container first-header" style="height:100%;background-color:white">
            <div class="navbar first-header  " style="height:100%">

                <div class="img-responsive header-image ">
                    <img src="~/img/logo2.png" style="height:100% ; width:100%" />
                </div>
                <div class="text-center header-text  ">
                    <h5 style="line-height: 0px"> قطعه یدکی اصلی را از ما بخواهید</h5>
                </div>
                <div class="img-responsive header-image">
                    <img src="~/img/logo1.png" style="height:100% ; width:100%" />
                </div>
            </div>
        </div>
    <nav class="navbar navbar-inverse">

        <div class="container" style="background-color:#0d0d42;width:100%">
            <div class="navbar-header navbar-right">
                <button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon glyphicon glyphicon-menu-hamburger" style="color:white;"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="mycollapse" style="background-color:#0d0d42;overflow:hidden">
                  <ul class="nav navbar-nav navbar-left">
                    <li> @Html.Partial("_LoginPartial")</li>
                    @if (Request.IsAuthenticated && User.IsInRole("Admin"))
                    {
                        <li>@Html.ActionLink("RolesAdmin", "Index", "RolesAdmin")</li>
                        <li>@Html.ActionLink("UsersAdmin", "Index", "UsersAdmin")</li>
                    }
                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li>@Html.ActionLink("درباره ما", "About", "Home")</li>
                    <li>@Html.ActionLink("خرید آنلاین", "About", "Home")</li>
                    <li>@Html.ActionLink("همایش ها", "About", "Home")</li>
                    <li>@Html.ActionLink("نمایندگی ها", "About", "Home")</li>
                    <li>@Html.ActionLink("نمایشگاه ها", "About", "Home")</li>
                    <li>@Html.ActionLink("محصولات", "TotalProduct", "Home")</li>
                    <li>@Html.ActionLink("صفحه اصلی", "Index", "Home")</li>


                </ul>

            </div>
        </div>
    </nav>
    @RenderSection("menue", false)
    <div class="container body-content" style="padding-top: 5px; margin-bottom: 5px;">
        @RenderBody()
    </div>
    <footer id="footer" style="background-color: whitesmoke; position: static; bottom: 0px; left: 0px; right: 0px; margin-bottom: 0px; align-items: center">
        <p style="direction:rtl; margin:auto; text-align:center">تمامی حقوق متعلق به شرکت  @DateTime.Now.Year &copy; می باشد</p>
        <p style="direction: rtl; margin: auto; text-align: center; font-size:small; ">طراحی و توسعه توسط </p>
    </footer>
    @RenderSection("scripts", required: false)
</body>
</html>

有什么建议吗？感谢

bootstrap响应导航栏与reponsive-tabs冲突

0 个答案: