Question

我正在尝试创建一个动态下拉按钮，其功能类似于选项按钮。我希望它成为一个按钮的原因是因为我可以更自由地影响它的外观。我正在使用bootstrap btw。

我试图制作自己的，当我没有找到一个工作的，并试图将其插入我的页面，看看它是否有效。它没有

我复制的代码是here。我唯一改变的是在js文件中我用（函数（$）{}）包围代码以确保定义了$。仍然没有。

下拉功能有效，它只是不会更新对我来说很重要的按钮文本。非常感谢任何帮助！

我的相关代码。以下是我的头，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="C:\Users\Tiko\Documents\jQuery\LoLCoach\Assets\favicon.ico">

  <title>League of Legends - GG WP</title>

  <!-- Bootstrap core CSS -->
  <link href="../LoLCoach/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="LoLCoach.css" rel="stylesheet">
  <link href="../LoLCoach/carousel.css" rel="stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js">   </script><![endif]-->
  <script src="../LoLCoach/Assets/ie-emulation-modes-warning.js"></script>

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="../LoLCoach/Assets/ie10-viewport-bug-workaround.js"></script>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <script type="text/javascript" src="dropdown.js"></script>
</head>

就像我说的那样，它几乎都是从链接中粘贴的，因为我很难让它发挥作用。

    <form action="/output/" name="InputCacheCheck" method="post">
<div class="input-prepend input-append">
    <div class="btn-group">

        <button class="btn dropdown-toggle" name="recordinput" data-toggle="dropdown">
        Record
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
              <li><a href="#">A</a></li>
              <li><a href="#">CNAME</a></li>
              <li><a href="#">MX</a></li>
              <li><a href="#">PTR</a></li>
        </ul>
    <input class=".input-large" name="hostnameinput" id="appendedInputButton" type="text">
    <button class="btn" type="submit">Lookup</button>
    </div>
</div>
</form>

这是头部引用的bootstrap.js文件。

(function($) {
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span   class="caret"></span>');
});
        });

这一切都很草率，因为我对此很陌生，但希望这会有所帮助。

动态下拉按钮

0 个答案: