Bootstrap Drop-Down funktioniert nicht in Schräg

Question

Ich habe ein Angular Projekt, das ein Dropdown von bootsnipp verwendet (Bootstrap-Schnipsel). Das Problem, das ich habe, ist, dass das Dropdown-Menü nicht mit der Suchleiste funktioniert.

// HTML

<div class="input-group"> 
    <div class="input-group-btn search-panel"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     <span id="search_concept">Search In</span> <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#"><i class="fa fa-th" aria-hidden="true"></i> All Category</a></li> 
     <li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i> IT Solutions</a></li> 
     <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i> Design and Multimedia</a></li> 
     <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Social Media and Marketing</a></li> 
    </ul> 
    </div> 
    <input type="hidden" name="search_param" value="all" id="search_param">   
    <input type="text" class="form-control" name="x" placeholder="Enter search keyword here"> 
    <span class="input-group-btn"> 
    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
    </span> 
</div> 

// JS

ngAfterViewInit(){ 
    $('.search-panel .dropdown-menu').find('a').click(function(e) { 
    e.preventDefault(); 
    var param = $(this).attr("href").replace("#",""); 
    var concept = $(this).text(); 
    $('.search-panel span#search_concept').text(concept); 
    $('.input-group #search_param').val(param); 
    }); 
} 

Answer 1

Bitte versuchen Sie jQuery in Eckige zu vermeiden. Angular haben auf dem Weg, diese Aufgaben zu erledigen. Zuerst müssen Sie verstehen, wie Dropdown in Bootstrap funktioniert. Wenn Sie auf die Dropdown-Schaltfläche klicken oder eine Verknüpfung herstellen, fügen Sie einfach eine Klasse in Ihr Dropdown-Menü ein, um das Menü anzuzeigen, und der Klassenname lautet "show". Jetzt wissen Sie, wie es funktioniert. Jetzt ist es Zeit zu implementieren. Befolgen Sie die folgenden Schritte, um Ihre Aufgabe zu erledigen.

1. Deklarieren Sie eine ToggleFlag benannte Variable in Ihrer Komponente.

   öffentlicher toggleFlag = false;

2. Jetzt ein Click-Ereignis auf dem Drop-Down-Menü-Taste erstellen. Dies ruft eine Methode in Ihrer Komponente auf.

   Suchen In

3. Jetzt zeigen Methode in Ihrer Komponente erstellen. Diese Methode wird toggleFlag Variable verwenden.

   öffentliches showDropdown() { this.toggleFlag = this.toggleFlag!; }

4. Jetzt ist es Zeit, toggleFlag varibale in Ihrer Vorlage zu verwenden.

   ul class = "Drop-Down-Menü" role = "Menü" [ngClass] = "{ 'show': toggleFlag}"

Hoffe, dass es

Answer 2

helfen Sie können mit diesem versuchen ngx-bootstrap.

https://valor-software.com/ngx-bootstrap/#/dropdowns