На моей странице есть раскрывающееся меню, и есть флажок ввода текста и окно загрузки изображения. Поле ввода текста отображается по умолчанию, в то время как окно загрузки изображения скрыто.
Предположим, что в раскрывающемся меню есть два элемента A и B, я хочу достичь этого эффекта: при щелчке a отображается поле ввода текста, и окно ввода изображения скрыто; При нажатии на B, окно загрузки изображения отображается и спрятано окно ввода текста . Как его реализовать?
При отладке с Firebug я обнаружил, что при загрузке HTML -странице будет выполнено всего несколько функций щелчка. После того, как страница загружена, щелкните элемент раскрывающегося меню, и эти точки останова не будут выполнены. Что происходит?
Мой код JS выглядит следующим образом (определено в разделе <head>):
<script type = "text/javascript"> // image_upload - это идентификатор окна загрузки изображения. В начале, скрыть это $ (document) .ready (function () {$ ("#Image_upload"). Hide ();}); // text_only-это раскрывающийся пункт меню. Я хочу, чтобы эта функция реализовала текстовое поле ввода Text_input при нажатии на этот пункт меню // Показывать текстовое поле ввода Text_input, скрыть поле «Загрузка изображения» Image_upload $ ('#text_only'). Click (e) {$ ("#text_input"). Show (); $ ("#i mapage_upload") Открывающееся меню. При нажатии на него текстовое поле скрыто и отображается окно загрузки изображения. */$ ('image_only'). Click (function () {$ ("#text_input"). Hide (); $ ("#Image_upload"). Show ();}); </script>Полный код заключается в следующем, я боюсь, что информации выше недостаточно:
<! Doctype html> <html lang = "en"> <Head> <Title> Hello, World </title> <meta name = "viewport" content = "width = width устройства, начальная шкала = 1,0"> <meta http-equiv = "Content-type" Content = "Text/html; warse = utf- equiv ="->->->->->- 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"> </script> <style> .center {width: Auto; Display: Table; Margin-top: 150px; Margin-left: Auto; Margin-Right: Auto;}. Текстовый центр {Margin-Top: 30px; Display: Table; Margin-Lefft: Auto; Margin-Right: Auto;} Body {Margin: 0; фон: url ('img/955.jpg'); фоновый размер: 1440px 800px; foanle-repeat: no-repeat; display: compact; 34px;} </style> <script type = "text/javascript"> $ (document) .ready ( function () {$ ("#image_upload"). Hide ();}); $ ('#text_only'). Click (e) {$ ("#text_input"). Show (); $ ("#Image_upload"). Hide (); e.stoppropagation ();}); $ ('Image_only'). Clic k (function () {$ ("#text_input"). hide (); $ ("#image_upload"). Show ();}); $ ('rebeysed'). Click (function () {$ ("#text_input"). Show (); $ ("#image_upload"). Show ();}); type = "text/javascript"> </script> </head> <body> <h1> hello, world </h1> <div> <div> <ul> <li> <a href = "#"> home </a> </li> <li> <a Data-togle = "href ="#"> singlemodal <b> </b> <l> <l> <l> <l> <l> <l> id = "text_only" href = "#"> text </a> </li> </ul> <li> <a data-toggle = "href ="#"> мультимодальный <b> </b> </a> <ul> <li> <a id =" text_only "href ="#"> text </a> </li> data-toggle = "href ="#"> мультимодальный <b> </b> </a> <ul> <li> <a id =" контролировано "href ="#"> контролируемое </a> </li> <li> <a id =" href "href ="#"> unsupervised </a> </li> </ul> </li> </li> </li> </li> </ul> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> End of Navbar-> <div> <form> <fieldset> <input id = "text_input" type = "text" chicelder = "text input"> </br> <div id = "image_upload" data-provides = "fileupload"> <!-<input type = "hidden" value = "" name = ">-> <div> <div> </i> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </i> <span></span></div><span><span>Select file</span><span>Change</span><input type="file" /></span><a href="#" data-dismiss="fileupload">Remove</a></div></div><button type="submit"> Search </button></br></fieldset></form></div></div> </body> </html>Bootstrap нажимает элемент раскрывающегося меню и отображает новый код реализации ввода. Я надеюсь, что это будет полезно для всех!