Javascript 引导手风琴工作不正常_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导手风琴工作不正常

javascript jquery html css twitter-bootstrap

Javascript 引导手风琴工作不正常,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在努力开发自助手风琴，它在中国很好地工作但是当我在我的web应用程序中尝试时，它不起作用。我已经附加了屏幕截图，它看起来如何。正如你在屏幕截图中看到的，控制台中没有错误。我在我的jsp页面中包含以下内容 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.c

我正在努力开发自助手风琴，它在中国很好地工作但是当我在我的web应用程序中尝试时，它不起作用。我已经附加了屏幕截图，它看起来如何。正如你在屏幕截图中看到的，控制台中没有错误。我在我的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">

甚至我也用

代替了

，但是运气不好。请告诉我我还需要什么？

以下是完整的代码

<%@ 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>


发送短信






发送短信给个人号码
输入要发送的号码：
输入要发送的消息：
发送
&时代；
成功的
消息已成功发送
名称
电子邮件地址
可移动的
添加
用户名
电子邮件ID
手机号码
在这里分组
第3节中的段落
$（函数（）{
$（“#datetimepicker”）.datetimepicker（{
格式：“'dd/MM/yyyy hh:MM:ss'”，
链接字段：“#txt”，
链接格式：“yyyy-mm-dd hh:ii”，
自动关闭：是的，
}); 
jQuery（'#datetimepicker'）.datetimepicker（）.on（'changeDate'，函数（ev）{
$（“.darea1”）.val（$（“.darea1”）.val（）+$（“#txt”）.val（））；
}); 
}); 
$（'#tabAll'）。单击（函数（）{
$（'#tabAll'）.addClass（'active'）；
$（'.tab窗格'）。每个（函数（i，t）{
$（'#myTabs li'）.removeClass（'active'）；
$（this.addClass（'active'）；
}); 
}); 
$（'body'）。在（'click'，'.btn'，function（）{
if（this.id=='openAlert'）
{$（'#number'）.val（''）}其他{$（'#number'）.val（this.id）}
});
$（文档）.ready（函数（）{
$（“#注销”）。单击（函数（）{
window.location.replace（“logout.jsp”）；
});
//下一行
var=0；
$（文档）.ready（函数（）{
$（'#btn1'）。单击（函数（）{
如果（$（“.span4”）.val（）！=”）
{
$（“#mytable”）。追加（“”）；
$（“#mytr”+val）。附加（“”）；
$（“.span4”）。每个（函数（）{
$（“#mytr”+val）.append（“+$（this.val（）+”）；
});
val++；
}
其他的
{
提醒（“请完整填写表格”）；
}
});
$（'#btn2'）。单击（函数（）{
var creat_group=确认（“您想创建一个组吗？”）；
如果（val>1）{
警报（创建组）；
}
});
});
//
$（'#openAlert'）。单击（函数（）{
var number=$（'#number'）.val（）；//如果它是文本输入，则可以使用.text（）
var msg=$（'#darea'）.val（）；//如果是文本输入，则可以使用.text（）
警报（msg）；
$.ajax(
{
类型：“POST”，
url:“messageSending.jsp”//您的完整url位于此处
数据：{toNumber:number，body:msg}，
成功：函数（数据、文本状态、jqXHR）{
警报（数据）；
},
错误：函数（jqXHR）{
警报（jqXHR.responseStatus）；
}
});
});
});
$（函数（）
{$（“#号码”）.popover（{标题：'输入手机号码'，内容：“请输入以国家代码为前缀的10位手机号码，例如+911234567890”}）；
});  
$（函数（）
{$（“#正文”）.popover（{标题：'消息正文'，内容：“允许最多160个字符”}）；
});

头部

HTML


动物教区的陈词滥调。。。
动物教区的陈词滥调。。。

小提琴：

Jquery 1.9.1:

为什么要在上次添加的组合中包含这些内容need@Ranadheer请看now@SridharR对不起，我不明白，签入fiddle你不需要把那些css分开，把所有这些结合起来，也可以删除多余的css/JS等并重新构建。清楚地给出了下面的答案，但您的答案仍然不起作用。请将其备份，或提供所有代码。ppl很难提供其他帮助。正如我在问题中所说，它在fiddle中工作，但在我的appyes中不起作用，因为您包含了css两次，只需按照我上面的答案标题部分进行操作

   <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">

   <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>