javascript - 自举 Accordion 无法正常工作

标签 javascript jquery html css twitter-bootstrap

我正在尝试开发自举 Accordion ，它在 jsfiddle 中运行良好 但是当我在我的网络应用程序中尝试时它不起作用。我已经附上了它的屏幕截图。正如您在屏幕截图中看到的那样，控制台中没有错误。我在我的 jsp 页面中包括以下内容

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"> 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

即使我用 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 代替了 <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 但运气不好。请告诉我我还需要什么？ enter image description here

完整代码如下

<%@ page import="java.sql.*" %>
<%@ page import="DB.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>send sms</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"> 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head> 
<body> 
<div class="tabbable" id="myTabs"> 
<ul class="nav nav-tabs"> 

<li class="active"><a href="#tab1" data-toggle="tab">Send Message</a></li> 
<li><a href="#tab2" data-toggle="tab">Users</a></li> 
<li><a href="#tab3" data-toggle="tab">Group Message</a></li> 
<li><a href="#tab4" data-toggle="tab" id="signout">Sign Out</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">

<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
  <button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>


<%i++;}

%></div>
<div class="container">
        <div class="row">
            <div class="span12">
                <h3>Send SMS to Individual number</h3>
                <form class="form-signin" action="#" method="post" onsubmit="return false;">
                    <div class="row">
                        <div class="span3">
                            Enter Number to send:
                        </div>
                        <div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />

                        </div>
                        <!--<div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />

                            </div>
                        </div>-->
                    </div>
                    <div class="row">
                        <div class="span3">
                            Enter Message to send:
                        </div>
                        <div class="span3"> <div id="datetimepicker" class="input-append date"> 
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/> 
<input type="text" id="txt" style="display:none"/> 
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on"> 
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
</span> 
</div> 
</div> 
                        <!--<div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The text of the message you want to send, limited to 160 characters.
                            </div>
                        </div>-->
                    </div>
                    <div class="row">
                        <div class="span3">
                        </div>
                        <div class="span9">
                            <button class="btn" type="submit" id="openAlert" >Send</button>

                        </div>
                    </div>
                </form>
            </div>
        </div>


 <div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</button>
      <h4>Successful</h4>
      <p>Message sent successfully</p>
    </div>
    </div>
</div> 
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2"> 



 <form class="well span9" action="insertNew" method="post"> 
<div class="row"> 
<div class="span3"> 
<label>Name</label> 
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required> 

</div> 
<div class="span3"> 

<label>Email Address</label> 
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required> 
</div> 
<div class="span3"> 
<label>Mobile</label> 
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required > 
</div> 
</div> 
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form> 
    <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">

<!-- accordion strats-->

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                records
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
groups here         </div>
        </div>
    </div>
</div>

<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div> 
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3"> 
<p>para in section 3</p> 
</div> 
</div> 
</div> 
<script> 
$(function() { 
$("#datetimepicker").datetimepicker({ 
format: "'dd/MM/yyyy hh:mm:ss'", 
linkField: "#txt", 
linkFormat: "yyyy-mm-dd hh:ii", 
autoclose: true, 
}); 

jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){ 
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val()); 
}); 

}); 

</script> 
<script> 
$('#tabAll').click(function(){ 
$('#tabAll').addClass('active'); 
$('.tab-pane').each(function(i,t){ 
$('#myTabs li').removeClass('active'); 
$(this).addClass('active'); 
}); 
}); 
$('body').on('click', '.btn', function(){ 
if(this.id=='openAlert')
    {$('#number').val('');}else{$('#number').val(this.id);}
});
</script> 
<script >



        $(document).ready(function(){
$("#signout").click(function() { 
    window.location.replace("logout.jsp"); 
});
//next line
var val=0;
$(document).ready(function(){


  $('#btn1').click(function(){
      if($(".span4").val()!="")
      {
  $("#mytable").append('<tr id="mytr'+val+'"></tr>');
  $("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');

             $(".span4").each(function () {

             $("#mytr"+val).append("<td >"+$(this).val()+"</td>");

              });
              val++;
      }
      else
      {
          alert("please fill the form completely");
      }
              });
    $('#btn2').click(function(){
        var creat_group=confirm("Do you want to creat a group??");
        if(val>1){
           alert(creat_group);


              }
    });




});

//
        $('#openAlert').click(function(){

            var number = $('#number').val(); // If its a text input could use .text()
            var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
            $.ajax(
                {
                    type: "POST",
                    url: "messageSending.jsp", //Your full URL goes here
                    data: { toNumber: number, body: msg},
                    success: function(data, textStatus, jqXHR){
                        alert(data);                  
                    },
                    error: function(jqXHR){
                        alert(jqXHR.responseStatus);
                    }
                });
        });
    });
        </script>
<script>  
$(function ()  
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});  
});  
$(function ()  
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});  
});
</script>  
  <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script> 
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>

</body>
</html>

最佳答案

头

   <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js" type="text/javascript">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" type="text/css" rel="stylesheet">

HTML

   <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>

fiddle :http://jsfiddle.net/fzN4K/15/

Jquery 1.9.1:http://jsfiddle.net/fzN4K/16/

关于javascript - 自举 Accordion 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19654693/

上一篇：Javascript获取所有文件减去某些文件扩展名

下一篇：javascript - AngularJs bootstrap 如何在表单提交后获取评分值？

相关文章：

javascript - Wimpy Player - 检查玩家是否在玩

javascript - 可编辑 react 表: pass data between components

javascript - 动态行值错误地更新到 mysql php

javascript - 如何使用JS获取h1标签的值？

jquery - Jquery UI 是否取代了 Jquery 中的任何功能？

javascript - 计算 slider 位置

html - 使用 Bootstrap 3 将 div 居中，放入另一个 div

javascript - 如何在raphael JS库中定义纸张？

html - 如何在响应式布局中垂直扩展 2 个 div？

javascript - 使用 jquery/javascript 的充电选项。 'Math' 逻辑

©2024 IT工具网  联系我们