Dropdown doesn't work mobile browser & Firefox

Question

I can't use this dropdown in mobile browser (Safari) can I know what is the problem ? It works well in Desktop browser like Chrome, Safari .. This code generated by Adobe Muse.

Also I tried this code in iPhone6 Plus.

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
     <style>

 body {
   font-family: 'Asap', sans-serif;
   color: #7F7F7F;
 }
 /* Dropdown style */
 .dropdown {
   margin: 0 auto;
   margin-bottom: 1em;
 }
 .dropdown dt a {
   display: block;
   height: 2.5em;
   width: 298px;
   border: 1px solid #ecf0f1;
   border-radius: 3px;
   text-decoration: none;
 }
 .dropdown dt a:hover, .dropdown dt a:active {
   border-color: #eeeeee;
 }
 .dropdown dt span {
   display: block;
   padding: 0 1em;
   line-height: 2.5em;
   border-right: 1em solid transparent;
   cursor: pointer;
 }
 .dropdown dd {
   position: relative;
 }
 .dropdown dd ul {
   display: none;
   position: absolute;
   left: -40px;
   top: -1.0em;
   width: 298px;
   list-style: none;
   background: #fff none repeat scroll 0 0;
   border: 1px solid #bdc3c7;
   border-radius: 3px;
 }
 .dropdown dd ul li:first-child a:hover {
   border-radius: 3px 3px 0 0;
 }
 .dropdown dd ul li:last-child a:hover {
   border-radius: 0 0 3px 3px;
 }
 .dropdown dd li a {
   display: block;
   line-height: 2.5em;
   text-decoration: none;
 }
 .dropdown dd li a:hover {
   background-color: #F6F6F6;
   color: #7F7F7F;
   cursor: pointer;
 }

 .selected {
   font-weight: 700;
 }

 </style>
 </head>
  <body>
 <dl class="dropdown">
     <dt><a><span>What's your budget?</span></a></dt>
         <dd>
             <ul>
                 <li><a>I'll mention my budget below</a></li>
                 <li><a>I don't know my budget yet</a></li>
                 <li><a>I'd rather not share my budget</a></li>

             </ul>
         </dd>
 </dl>
      <script type="text/javascript">
     var dropdowns = $(".dropdown");

 // Onclick on a dropdown, toggle visibility
 dropdowns.find("dt").click(function(){
     dropdowns.find("dd ul").hide();
     $(this).next().children().toggle();
 });

 // Clic handler for dropdown
 dropdowns.find("dd ul li a").click(function(){
     var leSpan = $(this).parents(".dropdown").find("dt a span");

     // Remove selected class
     $(this).parents(".dropdown").find('dd a').each(function(){
     $(this).removeClass('selected');
   });

     // Update selected value
     leSpan.html($(this).html());

     // If back to default, remove selected class else addclass on right element
     if($(this).hasClass('default')){
     leSpan.removeClass('selected')
   }
     else{
         leSpan.addClass('selected');
         $(this).addClass('selected');
     }

     // Close dropdown
     $(this).parents("ul").hide();
 });

 // Close all dropdown onclick on another element
 $(document).bind('click', function(e){
     if (! $(e.target).parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
 });
     </script>


 </body>

 </html>

Answer 1

Did you add jQuery library to your code?

Try adding it before the specific script tag.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
 var dropdowns = $(".dropdown");

etc....

Dropdown doesn't work mobile browser & Firefox

Question

1 answers

solution1
0 2015-03-05 18:01:48

Dropdown doesn't work mobile browser & Firefox

Question

1 answers

solution1 0 2015-03-05 18:01:48

solution1
0 2015-03-05 18:01:48