มีเมนูแบบเลื่อนลงในหน้าของฉันและมีกล่องป้อนข้อความและกล่องอัปโหลดรูปภาพ กล่องอินพุตข้อความจะปรากฏขึ้นตามค่าเริ่มต้นในขณะที่กล่องอัปโหลดรูปภาพถูกซ่อนอยู่
สมมติว่ามีสองรายการ A และ B ในเมนูแบบเลื่อนลงฉันต้องการให้ได้เอฟเฟกต์นี้: เมื่อคลิก A กล่องป้อนข้อความจะปรากฏขึ้นและกล่องป้อนภาพจะถูกซ่อนไว้ เมื่อคลิก B กล่องอัปโหลดรูปภาพจะปรากฏขึ้นและกล่องป้อนข้อความจะถูกซ่อนไว้ จะใช้งานได้อย่างไร?
เมื่อทำการดีบักกับ Firebug ฉันพบว่ามีเพียงไม่กี่ฟังก์ชั่นคลิกที่จะดำเนินการเมื่อโหลดหน้า HTML หลังจากโหลดหน้าเว็บแล้วให้คลิกรายการเมนูแบบเลื่อนลงและจุดพักเหล่านี้จะไม่ถูกเรียกใช้งาน เกิดอะไรขึ้น?
รหัส JS ของฉันมีดังนี้ (กำหนดไว้ในส่วน <head>):
<script type = "text/javascript" >/ image_upload เป็น ID ของกล่องอัปโหลดรูปภาพ ที่จุดเริ่มต้นซ่อนมัน $ (เอกสาร). ready (function () {$ ("#image_upload"). hide ();}); // text_only เป็นรายการเมนูแบบเลื่อนลง ฉันต้องการให้ฟังก์ชั่นนี้ใช้กล่องข้อความอินพุตข้อความ text_input เมื่อคลิกรายการเมนูนี้ // แสดงกล่องข้อความอินพุตข้อความ text_input ซ่อนภาพอัปโหลดภาพกล่อง image_upload $ ('#text_only') คลิก (ฟังก์ชั่น (e) {$ ("#text_input") รายการเมนูแบบเลื่อนลง เมื่อคลิกที่กล่องข้อความจะถูกซ่อนและกล่องอัปโหลดรูปภาพจะปรากฏขึ้น */$ ('image_only') คลิก (ฟังก์ชัน () {$ ("#text_input"). ซ่อน (); $ ("#image_upload"). show ();}); </script>รหัสที่สมบูรณ์มีดังนี้ฉันกลัวว่าข้อมูลข้างต้นไม่เพียงพอ:
<! doctype html> <html lang = "en"> <head> <title> สวัสดีโลก </ชื่อ> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0"> <meta http-equiv = "content-type" content = "text href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script src = "http://code.jquery.com/jquery.js"> </script> <script src = "bootstrap.min.js" 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-left: auto; margin-right: auto;} body {margin: 0; พื้นหลัง: url ('img/955.jpg'); พื้นหลัง: 1440px 800px; 34px;} </style> <script type = "text/javascript"> $ (เอกสาร). พร้อม ( function () {$ ("#image_upload"). ซ่อน ();}); $ ('#text_only') คลิก (ฟังก์ชั่น (e) {$ ("#text_input"). show (); $ ("#image_upload") ซ่อน (); k (function () {$ ("#text_input"). ซ่อน (); $ ("#image_upload"). show ();}); $ ('ภายใต้การดูแล') คลิก (ฟังก์ชั่น () {$ ("#text_input") แสดง (); $ ("#image_upload") type = "text/javascript"> </script> </head> <body> <h1> สวัสดีโลก </h1> <div> <div> <ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a data-toggle = "dropdown" href = "#" id = "text_only" href = "#"> ข้อความ </a> </li></ul> <li> <a data-toggle = "dropdown" href = "#"> multimodal <b> </b> </a> <ul> <li> data-toggle = "dropdown" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "ดูแล" href = "#"> ภายใต้การดูแล </a> </li> <li> <a id = "href ="#" End of Navbar-> <div> <form> <fieldset> <อินพุต id = "text_input" type = "text" placeholder = "อินพุตข้อความ"> </br> <div id = "image_upload" data-provides = "fileupload"> <! <span> </span> </div> <span> <span> เลือกไฟล์ </span> <span> เปลี่ยน </span> <อินพุต type = "ไฟล์"/> </span> <a href = "#" data-dismiss = "fileupload"> ลบ </a> </div> </body> </html>Bootstrap คลิกรายการเมนูแบบเลื่อนลงและแสดงรหัสการใช้งานกล่องอินพุตใหม่ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!