bootstrap carousel не работает в bootstrap mega menu

Я делаю мега-меню, в подменю У меня есть карусель, когда я нажимаю на карусель, следующая иконка не показывает следующий пункт карусели, внезапно подменю закрыто. Эта вещь также происходит с Пожалуйста, помогите мне.bootstrap carousel не работает в bootstrap mega menu

.mega-dropdown { 
 
    position: static !important; 
 
    } 
 
    .mega-dropdown-menu { 
 
    padding: 20px 0px; 
 
    width: 100%; 
 
    box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    }

<html> 
 
    <head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
    <body> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
<div class="navbar-header"> 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
</div> 
 
<ul class="nav navbar-nav"> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    
 

 
    <li class="dropdown mega-dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">Page 1 <span class="caret"></span></a> 
 
    <div class="dropdown-menu mega-dropdown-menu"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
<li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
<li data-target="#myCarousel" data-slide-to="2" class=""></li> 
 
<li data-target="#myCarousel" data-slide-to="3" class=""></li> 
 
    </ol> 
 

 
<!-- Wrapper for slides --> 
 
    
 
<div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://science-all.com/images/wallpapers/free-picture/free-picture-10.jpg" alt="Chania"> 
 
    </div> 
 

 
<div class="item"> 
 
    <img src="http://cdn.lightgalleries.net/4bd5ec0f44d0a/images/stock_photography157-2.jpg" alt="Flower"> 
 
</div> 
 

 
<div class="item"> 
 
    <img src="http://coachparaempresarias.com/wp-content/uploads/2014/03/Pareja-Mayor.jpg" alt="Flower"> 
 
</div> 
 
    </div> 
 

 
<!-- Left and right controls --> 
 
    
 
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
     </div> 
 
    </li></ul> 
 
    </div> 
 

 
</nav> 
 
    </body> 
 
    </html>

источник

2016-06-08 Kohi Noor

JS, CSS & HTML код

$(document).ready(function(){ 
 
    $(".dropdown").hover(   
 
     function() { 
 
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); 
 
      $(this).toggleClass('open');   
 
     }, 
 
     function() { 
 
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); 
 
      $(this).toggleClass('open');  
 
     } 
 
    ); 
 
});

body { 
 
    font-family: 'Open Sans', 'sans-serif'; 
 
} 
 
.mega-dropdown { 
 
    position: static !important; 
 
} 
 
.mega-dropdown-menu { 
 
    padding: 20px 0px; 
 
    width: 100%; 
 
    box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
} 
 
.mega-dropdown-menu > li > ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.mega-dropdown-menu > li > ul > li { 
 
    list-style: none; 
 
} 
 
.mega-dropdown-menu > li > ul > li > a { 
 
    display: block; 
 
    color: #222; 
 
    padding: 3px 5px; 
 
} 
 
.mega-dropdown-menu > li ul > li > a:hover, 
 
.mega-dropdown-menu > li ul > li > a:focus { 
 
    text-decoration: none; 
 
} 
 
.mega-dropdown-menu .dropdown-header { 
 
    font-size: 18px; 
 
    color: #ff3546; 
 
    padding: 5px 60px 5px 5px; 
 
    line-height: 30px; 
 
} 
 

 
.carousel-control { 
 
    width: 30px; 
 
    height: 30px; 
 
    top: -35px; 
 

 
} 
 
.left.carousel-control { 
 
    right: 30px; 
 
    left: inherit; 
 
} 
 
.carousel-control .glyphicon-chevron-left, 
 
.carousel-control .glyphicon-chevron-right { 
 
    font-size: 12px; 
 
    background-color: #fff; 
 
    line-height: 30px; 
 
    text-shadow: none; 
 
    color: #333; 
 
    border: 1px solid #ddd; 
 
}

<html> 
 
    <head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     
 
    
 
    <li class="dropdown mega-dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">Page 1 <span class="caret"></span></a> 
 
     <div class="dropdown-menu mega-dropdown-menu"> 
 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="2" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="3" class=""></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://science-all.com/images/wallpapers/free-picture/free-picture-10.jpg" alt="Chania"> 
 
    </div> 
 

 
    
 

 
    <div class="item"> 
 
     <img src="http://cdn.lightgalleries.net/4bd5ec0f44d0a/images/stock_photography157-2.jpg" alt="Flower"> 
 
    </div> 
 
    </div> 
 
      
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

источник

2016-06-08 05:47:32 Saika

его карусельного вещь хорошо работает, но когда я щелкая дома его также показывая подменю страницы 1 карусель. Проверь это. –

Пожалуйста, нажмите на «Полная страница», а затем проверьте это ... – Saika

Спасибо за это. Спасибо, так много :) Если я хочу использовать вертикальную вкладку в подменю, что мне делать? потому что tabpanel также не работал, как моя карусель. –

bootstrap carousel не работает в bootstrap mega menu

ответ

Смежные вопросы