0
votes

La liste des options Bootstrap MultiSelect doit être masquée lors du défilement de la fenêtre

<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/>

</head>
<body>
<div class="container">
<div class="example">
<script type="text/javascript">
    $(document).ready(function() {
        $('#multi-select-demo').multiselect();
    });
</script>
<select id="multi-select-demo" multiple="multiple">
    <option value="jQuery">jQuery tutorial</option>
    <option value="Bootstrap">Bootstrap Tips</option>
    <option value="HTML">HTML</option>
    <option value="CSS">CSS tricks</option>
    <option value="angular">Angular JS</option>
</select>
</div>
</div>
</body>
</html>

En multisélection, nous avons un tas d'options. Ces options doivent se cacher pendant que l'utilisateur fait défiler la fenêtre. La liste est contenue dans un ul avec le nom de classe "multiselect-container".

javascript html css twitter-bootstrap-3

3 commentaires

vouliez-vous dire fermer la liste déroulante lorsque l'utilisateur fait défiler?

oui, c'est @semira

toute solution possible ou cette @semira

3 Réponses :

0
votes

Déclencher un clic en dehors de l'élément devrait faire l'affaire.

$ (document) .click ();

Il n'y a pas de moyen officiel de 'fermer' le la liste déroulante bootstrap, cependant, celle ci-dessus est une solution de contournement pour gérer cela. Il déclenche essentiellement un faux clic en dehors de la liste déroulante, par conséquent, la ferme.

Si vous voulez qu'il se ferme à chaque fois que l'utilisateur commence à faire défiler, alors:

$(window).on('scroll',function(){
    $(document).click();
});

3 commentaires

ce n'est pas une solution possible pour un problème donné.

pouvez-vous partager l'exemple en cours avec ce code s'il vous plaît

Bien sûr, allez-y: codepen.io/zdo/full/MWgmPbd pour le code, voir < a href = "https://codepen.io/zdo/pen/MWgmPbd" rel = "nofollow noreferrer"> codepen.io/zdo/pen/MWgmPbd

0
votes

<div class="nav">Scroll to show/hide this bar!</div>

<p>They see me scrolling...</p>

@import bourbon

body
  font-family: helvetica neue, helvetica, arial, sans-serif
  height: 8000px

.nav
  background: #111
  text-align: center
  color: #fff
  +padding(20px null)
  +position(fixed, null 0px 0px 0px)
  +transition(transform 1s $ease-in-out-quint)

.nav.hidden 
  +transform(translateY(100%))
    
p
  margin: 0
  +padding(20px)

var prev = 0;
var $window = $(window);
var nav = $('.nav');

$window.on('scroll', function(){
  var scrollTop = $window.scrollTop();
  nav.toggleClass('hidden', scrollTop > prev);
  prev = scrollTop;
});

0 commentaires

0
votes

<!DOCTYPE html>
<html>
<head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"
          rel="stylesheet"/>

</head>
<body>
<div class="container">
    <div class="example">
        <script type="text/javascript">
            $(document).ready(function () {
                $('#multi-select-demo').multiselect();
            });

            window.addEventListener("wheel", myScript);

            function myScript() {
                $("#multi-select-demo").dropdown('toggle');
            }
        </script>
        <select id="multi-select-demo" multiple="multiple">
            <option value="jQuery">jQuery tutorial</option>
            <option value="Bootstrap">Bootstrap Tips</option>
            <option value="HTML">HTML</option>
            <option value="CSS">CSS tricks</option>
            <option value="angular">Angular JS</option>
        </select>
    </div>
</div>
</body>
</html>

0 commentaires