Несогласованное поведение щелчка в раскрывающемся меню

Я нашел этот код для создания выпадающего меню CSS на моем сайте. Однако поведение щелчка противоречиво. Иногда он будет работать несколько раз подряд, а иногда просто не будет работать, даже когда я нажимаю на ту же область. Есть ли что-то, что я могу сделать, чтобы сделать эту работу лучше?

HTML:

 <form class="searchbox" action="">
    <input type="search" placeholder="search.." />
    <ul class="suggestions">
        <li><a href="/about">About</a></li>
        <li><a href="/intro">Home</a></li>
        <li><a href="/video-games">Video Games</a></li>
        <li><a href="/theatre">Theatre</a></li>
    </ul>
</form>

стиль CSS:

body{
/*changing background color*/
background-color:#ebebeb;
}
.searchbox{
/*definint width of form element*/
    width:350px;
/*centering the form element*/
    margin:100px auto;
}
input[type="search"]{
    padding:10px 15px 10px 50px;
    font-size:36px;
    color:#1f5350;
/*removing boder from search box*/
    border:none;
/*defining background image as a search symbol*/
    background-color:#7accc8;
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder{
    color:#b1e0de;
}
input[type="search"]:-moz-placeholder { /* Firefox 18- */
   color: #b1e0de;
}
input[type="search"]::-moz-placeholder {  /* Firefox 19+ */
   color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder {  /* interner explorer*/
   color: #b1e0de;
}
.searchbox a{
    display:block;
/*removing underlines from anchor element*/
    text-decoration:none; 
    color:#1f5350;
    font-size:30px;
    background-color:#ace5e2;
    padding:10px;
}
.searchbox ul{
/*removing predefined bullet points from list*/
    list-style:none;
/*removing padding from list items*/
    padding:0;
     width:465px;
}
.searchbox ul li{
    margin-bottom:10px;
}
/*adding effect when the mouse is hovered over list item*/
.searchbox ul li a:hover{
    color:#b23b61;
    background:#ecd1da;
}
/*moving it slightly toware right when hovered*/
.searchbox ul li:hover{
/*transform*/
-webkit-transform:translateX(20px);
   -moz-transform:translateX(20px);
    -ms-transform:translateX(20px);
     -o-transform:translateX(20px);
        transform:translateX(20px);
}
/*now first we will hide the suggestion list*/
.suggestions li{
    overflow:hidden;
    height:0;
    -webkit-transition:all 0.3s ease-in-out;
   -moz-transition:all 0.3s ease-in-out;
     -o-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
}
/*and make the suggestion reappear when user focus on search field*/
input[type="search"]:focus + .suggestions li{
    height:63px;
}

.byline{
  text-align:center;
  font-size:18px;
}
.byline a{
  text-decoration:none;
  color: #1f5350;
}

Спасибо!

1 ответ

  1. Ваш сайт использует Bootstrap и jQuery ? У меня была эта проблема один раз, и все, что мне нужно было сделать, это включить мой файл jQuery перед включением моего загрузочного файла, как это:

    <script type="text/javascript" src="js/jquery-X.X.X.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    

    Кроме того, если вы используете Bootstrap, проверьте, что вы не включаете его несколько раз в разных местах.