0

我的 html 代码中有 4 个下拉菜单，如此处所示。在页面创建时，因子下拉按钮的下拉菜单应该是#dd3 而不是#dd4。但是我碰巧得到了错误的下拉菜单来显示。对此有什么帮助吗？我添加了下面的代码和@jsfiddle：

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <style type="text/css">
    #container2{
        position: relative;
        padding-top: :123px;
    }





    </style>
    <title>Google Top Apps Trending</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {


            //var d = new Date();
            //var year = ["2013", "2014"];
            var monthNames = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];



            var factors1 = new Array();
                factors1 = ["Version","Architecture","SDK Version","Target SDK","Phone to Tablet","Resolution"];


            for (i = 0; i < factors1.length; i++) {

                $("#dd3").append("<li><a href='#'>" + factors1[i] + "</a></li>");
            }


            var factors2 = new Array();
            var factors2 = ["IA Architecture Usage","Phone to Tablet"];


            for (i = 0; i < factors2.length; i++) {

                $("#dd4").append("<li><a href='#'>" + factors2[i] + "</a></li>");

            }

            for (i = 0; i < monthNames.length; i++) {

                $("#dd1").append("<li><a href='#'>" + monthNames[i] + "</a></li>");
                $("#dd2").append("<li><a href='#'>" + monthNames[i] + "</a></li>");
            }


            $("#dd1 li a").click(function () {
                var selText = $(this).text();
                $("#monthFrom").text(selText);

            });

            $("#dd2 li a").click(function () {
                var selText = $(this).text();
                $("#monthTo").text(selText);

            });


            $("#dd3 li a").click(function () {
                var selText = $(this).text();
                $("#aspect").text(selText);

            });


            $("#dd4 li a").click(function () {
                var selText = $(this).text();
                $("#monthlyaspect").text(selText);

            });


            $("#monthly").click(function(){
                $("#monthTo").hide();
                $("#monthFrom").text("Choose a Month");
                $("#aspect").hide();
                $("#monthlyaspect").show();



            });


            $("#trend").show(function() { 

                $("#aspect").show();
                $("#monthlyaspect").hide();

            });
            $("#monthly").show(function() { 
                $("#aspect").hide();
                $("#monthlyaspect").show();

            });

            $("#trend").click(function(){
                $("#aspect").show();
                $("#monthTo").show();
                $("#monthFrom").text("Choose Month 1");
                $("#monthlyaspect").hide();


            });


        });

    </script>

</head>
<body>

    <div class="container">
        <div class="row">
            <div class="span12">

                <h3>Google App Analytics</h3>

                <div class="navbar">
                    <div class="navbar-inner">

                        <ul class="nav">
                            <li><a href="#" id="monthly" >Monthly Analysis</a></li>
                            <li><a href="#" id="trend">Trend Analyser</a></li>

                        </ul>

                    </div>
                </div>
                <div id="container1" class="well carousel-search hidden-phone">
                    <div class="btn-group"> <a id='monthFrom' class="btn dropdown-toggle btn-select1" data-toggle="dropdown" href="#" >Choose Month 1 <span class="caret"></span></a>

                        <ul id="dd1" class="dropdown-menu"></ul>
                    </div>
                    <div class="btn-group"> <a id='monthTo' class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#" >Choose Month 2 <span class="caret"></span></a>

                        <ul id="dd2" class="dropdown-menu"></ul>
                    </div>
                    <div  class="btn-group">    <a id='aspect' class="btn dropdown-toggle btn-select3" data-toggle="dropdown" href="#" >Factor<span class="caret"></span></a>

                        <ul id="dd3" class="dropdown-menu">


                        </ul>
                    </div>
                    <div  class="btn-group">    <a id='monthlyaspect' class="btn dropdown-toggle btn-select4" data-toggle="dropdown" href="#" >Factor<span class="caret"></span></a>

                        <ul id="dd4" class="dropdown-menu">


                        </ul>
                    </div>



                    <input id="btn1"  type="submit" class="btn" value="Analyze"   style="float: right;" />
                    </div>

                </div>


            </div>




        </div>
    </div>
</div>

页面打开时应隐藏 ID 为“#dd4”的下拉菜单。它恰好显示并且项目的大小（下拉按钮）也在不断变化。有没有办法我可以修复下拉按钮的大小。对不起，我对 javascript 完全陌生。希望有人能给我一个很好的建议。

4

1 回答 1

0

在 jQuery 中，您使用 hide() 方法隐藏某些内容，然后使用 show() 显示它

例如隐藏#dd4 下拉菜单

$('#dd4').hide();

如果你想在#dd4 被隐藏时做一些事情

    $('#dd4').hide(function(){
        $('#dd3').show();//to show the #dd3 dropdown on #dd4 hidden
    });

要显示，请替换代码中的显示！

要修复下拉列表大小，您可以使用 javascript，但最佳实践告诉我们在 css 中完成！因此，在标签内添加这个 css，如下所示

<style type="text/css">
  /*------*/
  ul.dropdown-menu,ul.dropdown-menu li{
       width:200px;//replace with the size you wish
       max-width:200px;//replace with the size you wish
  }


</style>

完整代码：

 <!DOCTYPE html>

<html lang="en">
<head>
<style type="text/css">
#container2{
    position: relative;
    padding-top: :123px;
}


  ul.dropdown-menu,ul.dropdown-menu li{
       width:200px;//replace with the size you wish
       max-width:200px;//replace with the size you wish
  }



</style>
<title>Google Top Apps Trending</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
    $(document).ready(function () {


            //var d = new Date();
            //var year = ["2013", "2014"];
                var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];

      var factors1 = new Array();
 factors1 = ["Version","Architecture","SDK Version","Target SDK","Phone to Tablet","Resolution"];
        for (i = 0; i < factors1.length; i++) {
            $("#dd3").append("<li><a href='#'>" + factors1[i] + "</a></li>");
            }
            var factors2 = new Array();
            var factors2 = ["IA Architecture Usage","Phone to Tablet"];
            for (i = 0; i < factors2.length; i++) {
                 $("#dd4").append("<li><a href='#'>" + factors2[i] + "</a></li>");

            }

             for (i = 0; i < monthNames.length; i++) {

                $("#dd1").append("<li><a href='#'>" + monthNames[i] + "</a></li>");
                $("#dd2").append("<li><a href='#'>" + monthNames[i] + "</a></li>");
            } 


             $("#dd1 li a").click(function () {
                 var selText = $(this).text();
                 $("#monthFrom").text(selText);

            });

             $("#dd2 li a").click(function () {
                var selText = $(this).text();
                $("#monthTo").text(selText);

            });


             $("#dd3 li a").click(function () {
                 var selText = $(this).text();
                 $("#aspect").text(selText);

            });


             $("#dd4 li a").click(function () {
                 var selText = $(this).text();
                 $("#monthlyaspect").text(selText);

             });
              $("#dd4).hide();//new line

             $("#monthly").click(function(){
                $("#monthTo").hide();
                $("#monthFrom").text("Choose a Month");
                $("#aspect").hide();
                $("#monthlyaspect").show();
                $("#dd4").show();////new line


            });


        $("#trend").show(function() { 

            $("#aspect").show();
            $("#monthlyaspect").hide();
            $("#dd4").hide();//new line

        });
        $("#monthly").show(function() { 
            $("#aspect").hide();
            $("#monthlyaspect").show();
            $("#dd4").show();//new line
        });

        $("#trend").click(function(){
            $("#aspect").show();
            $("#monthTo").show();
            $("#monthFrom").text("Choose Month 1");
            $("#monthlyaspect").hide();
            $("#dd4").hide();//new line

        });


    });

     </script>

 </head>
 <body>
    <div class="container">
    <div class="row">
              <div class="span12">                    

      <h3>Google App Analytics</h3>
               <div class="navbar"><div class="navbar-inner">

     <ul class="nav">
        <li><a href="#" id="monthly" >Monthly Analysis</a></li>
        <li><a href="#" id="trend">Trend  Analyser</a></li>
     </ul>
                </div>
            </div>
            <div id="container1" class="well carousel-search hidden-phone">
                <div class="btn-group"> <a id='monthFrom' class="btn dropdown-toggle btn-select1" data-toggle="dropdown" href="#" >Choose Month 1 <span class="caret"></span></a> <ul id="dd1" class="dropdown-menu"></ul>
                    </div>
                    <div class="btn-group"> <a id='monthTo' class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#" >Choose Month 2 <span class="caret">   </span></a>  
                        <ul id="dd2" class="dropdown-menu"></ul>
                    </div>
                    <div  class="btn-group">    <a id='aspect' class="btn dropdown-toggle btn-select3" data-toggle="dropdown" href="#" >Factor<span class="caret"></span></a>

                        <ul id="dd3" class="dropdown-menu">


                        </ul>
                    </div>
                    <div  class="btn-group">    <a id='monthlyaspect' class="btn dropdown-toggle btn-select4" data-toggle="dropdown" href="#" >Factor<span class="caret"></span></a>

                        <ul id="dd4" class="dropdown-menu">


                        </ul>
                    </div>



                <input id="btn1"  type="submit" class="btn" value="Analyze"   style="float: right;" />
                </div>

                </div>


            </div>




        </div>
    </div>
</div>

PS：我将我的行注释为“//新行”，因此如果您不需要显示/隐藏 dd4 可以将其删除，或者您也可以将 dd4 更改为 dd3

于 2013-10-30T08:54:49.817 回答