MenuDropDown

Olá Boa tarde pessoal!!!

Estou aprendendo mais sobre bootstrap e me deparei com um problema 

a programação para efetuar dropdown não funciona em android??? (utilizei o BlueStacks-ThinInstaller para testar mais rapidamente), e meu samsung g s3 mini. 

o menu Abre, porém as opções não ficam clicáveis (aperto para entrar na opcao e nada acontece) (isso somente no android, testei navegador padrao, chrome e fire fox, em ambos emulador e celular)

navegando em windows, ie, firefox, chrome opera, o comando funciona normalmente

abaixo segue um exemplo resumido do codigo utilizado


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="teste.aspx.vb" Inherits="teste.teste" %>

<!DOCTYPE html>

<head>
      
    <link rel="shortcut icon" href="favicon/favicon.ico" />
    <link rel="icon" type="image/gif" href="favicon/animated_favicon1.gif" />
        
        <!-- Favicon end code-->

    <meta charset="utf-8">
    <title>Demonstracao</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

    <!-- <script src="dist/js/bootstrap.js"></script>
    <script>$('.dropdown-toggle').dropdown();</script>-->

    <style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }

      /* Custom container */
      .container-narrow {
        margin: 0 auto;
        max-width: 1080px;
      }
      .container-narrow &gt; hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 60px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }
        .auto-style1 {
            color: #000000;
        }
        .auto-style2 {
            text-align: left;
        }
        .auto-style3 {
            color: #0044CC;
        }
    </style>
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link href="../assets/ico/favicon.ico" rel="shortcut icon">
    <link href="../assets/ico/apple-touch-icon-144-precomposed.png" sizes="144x144" rel="apple-touch-icon-precomposed">
    <link href="../assets/ico/apple-touch-icon-114-precomposed.png" sizes="114x114" rel="apple-touch-icon-precomposed">
    <link href="../assets/ico/apple-touch-icon-72-precomposed.png" sizes="72x72" rel="apple-touch-icon-precomposed">
    <link href="../assets/ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon-precomposed">

  </head>

    <body style="background-color:#F1F1F2">
        <!-- Scripts Ligados-->
        <script src="js/bootstrap.min.js"></script>

    <div class="container-narrow">

      <div class="masthead">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="Default.aspx">Home</a></li>
          <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
                  Menu             
                  <b class="caret"></b>
                  
              </a>
              <ul class="dropdown-menu">
                  <li><a href="pagina.aspx">menu</a></li>
                  <li><a href="#">menu</a></li>
                  <li class="divider"></li>
                  <li><a href="#">menu</a></li>
                  <li><a href="#">menu</a></li>
                                    
              </ul>
          </li>
          <li><a href="pagina.aspx">menu</a></li>
          <li><a href="pagina.aspx">menu</a></li>
          <li><a href="pagina.aspx">menu</a></li>
          <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown"> 
                  Menu           
                  <b class="caret"></b>
                  
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">
                  <li class="nav-header">acao</li>
                  <li><a href="paginas.aspx">acao</a></li>
                  <li><a href="#">Açao</a></li>
                  <li class="divider"></li>
                  <li><a href="#"></a></li>
                  
              </ul>
          </li>
          <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown"> 
                 links 3          
                  <b class="caret"></b>
                  
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">
                  <li class="nav-header">Header</li>
                  <li><a href="paginas.aspx">Ação1</a></li>
                  <li><a href="#">Ação2</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Header</li>
                  <li><a href="#">Ação3</a></li>
                  <li class="divider"></li>
                  
              </ul>
          </li>
          
        </ul>
          &nbsp;

      </div> <!-- end div container-narrow-->

      
        <hr>
      <div class="row-fluid marketing">
        <div class="span12">
          <h2 class="auto-style1">Texto de exemplo</h2>
          <p class="auto-style1">Texto de exemplo</p>
        </div>
      </div> <!-- fecha rowfluid marketing1-->

         <div class="row-fluid marketing">

          <div class="span6">
          <h4 class="auto-style1">Texto de exemplo</h4>
          <p class="auto-style1">Texto de exemplo</p>

          <h4 class="auto-style1">Texto de exemplo</h4>
          <p class="auto-style1">Texto de exemplo</p>
          
          <h4 class="auto-style1">Texto de exemplo</h4>
          <p class="auto-style1">Texto de exemplo</p>
          <p class="auto-style2"><a href="Contato.aspx" class="btn btn-primary">Contato</a></p>
              </div>
          

        
            
        </div> <!-- fecha rowfluid marketing2-->
     

      <hr>

      <div class="footer">
        <p><span><strong>&copy; Direitos reservados</strong></span> </p>
      </div>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  <!-- Código Google Analytics -->

   

</body>
</html>



Comentários

  • quem puder ajudar por favor, ja recorri a varios sites de pesquisa e não encontrei nenhuma solução aparentemente

    ja tentei algumas opcoes que li como data target e chamar via script o $('.dropdown-toggle').dropdown()
    ou eu não consegui colocar no lugar correto o codigo, ou realmente nao funciona

    muito obrigado desde já !!! :)


  • Vc tem está página hospeda? se sim me passe o link.

    area
    area
    area
    area
    area

    image
  • não por hora não, mas o proprio site aqui (testei também) e varios outros, ocorre o mesmo erro 

    para criar o site inicialmente usei os exemplos que achei da http://globocom.github.io/bootstrap/getting-started.html#examples

    (basicamente copiei um dos layouts para teste)


    image
  • Boa Galera, tenho uma solução para esse problema.

    abra o arquivo bootstrap.js e procure pela linha .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus), a cima de $(document) 
    acrescente este código   $('.dropdown-menu').on('touchstart.dropdown.data-api', function(e) { e.stopPropagation() }) agora e só salvar e pronto tudo resolvido. =D

    Pra mim resolveu em todas as plataformas como IOS e Android.

     
Entre ou Registre-se para fazer um comentário.