Afficher ul sur le bouton cliquez sur

Question

J'ai un bouton et un ul en dessous, le ul est réglé pour afficher aucun, ce que je veux faire est quand je clique sur le bouton l'ul apparaît avec un fond blanc et je veux le bouton pour prendre le même style que le ul, et je veux que la largeur du ul soit la même que la largeur du bouton, comment puis-je faire cela? Voici mon code:

$("button").click(function() { 
 
    $("ul").show(); 
 
    
 
});

ul{ 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button> Hello </button> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a></li> 
 
</ul>

Answer 1

je veux que le bouton pour prendre le même style que la ul

Appliquer des styles CSS sur le bouton. À l'heure actuelle, la seule différence semble être le font-family.

je veux la largeur de ul à être la même que la largeur

du bouton Set width de la touche pour être la même que la liste non ordonnée en utilisant CSS.

La liste non ordonnée est décalée vers la droite car il y a un remplissage à gauche. Réduisez padding-left pour réduire le décalage des éléments. Le width et le padding-left doivent correspondre au width du bouton.

J'ai ajouté quelques CSS pour vous. N'hésitez pas à jouer avec plus.

$("button").click(function() { 
 
    $("ul").show(); 
 
});

ul { 
 
    display: none; 
 
    width: 85px; 
 
    padding-left: 15px; 
 
} 
 

 
button { 
 
    font-family: serif; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Hello</button> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a></li> 
 
</ul>

Answer 2

Utilisation css() au lieu de show().

$("button").click(function() { 
 
    $("ul").css("display", "block"); 
 
});

ul{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button> Hello </button> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a></li> 
 
</ul>