Il y a un menu déroulant sur ma page, et il y a une zone de saisie de texte et une boîte de téléchargement d'image. La zone d'entrée de texte s'affiche par défaut, tandis que la boîte de téléchargement d'image est masquée.
Supposons qu'il y ait deux éléments A et B dans le menu déroulant, je souhaite réaliser cet effet: Lorsque vous cliquez sur A, la zone d'entrée de texte s'affiche et la zone d'entrée d'image est masquée; Lorsque vous cliquez sur B, la boîte de téléchargement d'image s'affiche et la zone d'entrée de texte est masquée . Comment l'implémenter?
Lors du débogage avec Firebug, j'ai constaté que seules quelques fonctions de clic seront exécutées lors du chargement de la page HTML. Une fois la page chargée, cliquez sur l'élément de menu déroulant et ces points d'arrêt ne seront pas exécutés. Que se passe-t-il?
Mon code JS est le suivant (défini dans la section <adhead>):
<Script Type = "Text / JavaScript"> // image_upload est l'ID de la zone de téléchargement d'image. Au début, cachez-le $ (document) .ready (function () {$ ("# image_upload"). Hide ();}); // text_only est un élément de menu déroulant. Je veux que cette fonction implémente la boîte de saisie du texte text_input lorsque vous cliquez sur cet élément de menu // Affichez la boîte de saisie du texte text_input, masquez la boîte de téléchargement d'image image_upload $ ('# text_only'). Cliquez sur (fonction (e) {$ ("# text_input"). Show (); $ ("# i mapage_upload"). Hide (); e.Soppropagation ();}); élément de menu. Lorsque vous cliquez dessus, la zone de texte est masquée et la boîte de téléchargement d'image s'affiche. notreLe code complet est le suivant, j'ai peur que les informations ci-dessus ne soient pas suffisantes:
<! Doctype html> <html lang = "en"> <éread> <Title> Hello, world </ title> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1.0"> <meta http-equiv = "contenu-type" contenu = "Text / html; charset = utf-8" /> <! href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script src = "http://code.jquery.com/jquery.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> <script src = "js / bootstrap-fileupload.js"> </cript> <style> .Center {width: auto; affichage: table; margin-top: 150px; margin-left: auto; margin-right: auto;}. text-center {margin-top: 30px; affichage: table; marge-left: auto; marge-droite: auto;} corps {marge: 0; fond: url ('img / 955.jpg'); arrière-taille: 1440px 800px; arrière 34px;} </ style> <script type = "text / javascript"> $ (document) .ready ( function () {$ ("# image_upload"). hide ();}); $ ('# text_only'). Cliquez sur (fonction (e) {$ ("# text_input"). k (function () {$ ("# text_input"). hide (); $ ("# image_upload"). show ();}); $ ('supervisé'). Cliquez sur (fonction () {$ ("# text_input"). show (); $ ("# image_upload"). show ();}); type = "text / javascript"> </ script> </ head> <body> <h1> Bonjour, monde </h1> <v> <div> <ul> <li> <a href = "#"> home </a> </li> <li> <a data-toggle = "dropdown" href = "#"> SingleModal <b> </b> </a> <f> <li> <li> id = "text_only" href = "#"> text </a> </li> </ul> <li> <a data-toggle = "dropdown" href = "#"> Multimodal <b> </b> </a> <ul> <li> <a id = "text_only" href = "#"> </a> </li> </ul> data-toggle = "dropdown" href = "#"> Multimodal <b> </b> </a> <ul> <li> <a id = "supervisé" href = "#"> supervisé </a> </li> <li> <a id = "non supervisé" href = "#"> UNUSPERVISE <! fin de navbar -> <div> <form> <fieldset> <input id = "text_input" type = "text" placeholder = "text input"> </br> <div id = "image_upload" data-provides = "fileupload"> <! - <entrée type = "HIDDEN" value = "" name = ""> -> <div> <div> <i> </ i> <span> </ span> </ div> <span> <span> sélectionnez le fichier </span> <span> modifier </span> <input type = "file" /> </span> <a href = "#" data-dimismiss = "fileupload"> supprimer </a> </div> </div> <bouton type = "soumis"> recherche </brut> </br> </FIELDSET> </ body> </html>Bootstrap clique sur l'élément de menu déroulant et affiche un nouveau code d'implémentation de la zone d'entrée. J'espère que ce sera utile à tous!