Question

大家好，我正在为我的大学项目制作一个FAQ页面，而且我已经完成了所有工作，但我想让它看起来更漂亮。我把一个箭头写进了一个css文件，我想把它放到我的html中。在我的html中有标题，它有一个按钮，通过jQuery显示和隐藏内容。我的问题是：如何将箭头放在每个标题中并使其可点击以便我可以删除该按钮并通过单击标题自己将显示内容？

感谢您的帮助

这是我的CSS：

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .body
    {
    padding: 10px 6px;
    height: 0;
    background: #ff4400;
    display:inline-block;
    margin:0 0 0 -4px;
    z-index:999;
    }

    .arrow
    {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #ff4400;
    display: inline-block;
    margin: 0 0 0 -5px;
    }

    </style>
    </head>

    <body>

    <div class="body"></div>
    <div class="arrow"></div>

    </body>
    </html>

这是我的html文件

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $(".button").click(function () {
           var div= $("#"+this.value);
      div.toggle("slow").siblings().hide("slow");
    });
    });  
    </script>
    </head>
    <body>
    <title>FAQ</title>
    <h><font size="7">FAQ</font><font size= "5.5">Most frequently asked questions</font></h>
    <div id="buttonDiv"></div>    

    <!-- setting BUTTON 1-->
    <h1><font size="5">QUESTION 1</font><button id="button1" type="button" class="button" value="Show1">Show/Hide</button></h1>
    <!--------------------QUESTION 1 --------------------------------------------->  

    <div>
      <div id="Show1" style="display:none">
        Answer to the question 1
     </div>   
    </div>


    </body>
    </html>

Answer 1

不确定您的问题是什么，并且您正在显示两个不同的html页面

$(".arrow").on("click",function() {
    alert("Clicked");
});

使用

cursor:pointer

在这里为我工作：

Live Demo

使用您的评论，请点击此处

Live Demo

$(document).ready(function(){
  $(".clickable").on("click",function() {
    val = $(this).data("val");  
    var div= $("#"+val);
    div.toggle("slow").siblings().hide("slow");
  });
});

并且不使用ID但类和值是非法的，请使用data-val：

<h1 class="clickable" data-val="Show1"><div class="body"></div><div class="arrow"></div>

Answer 2

JS：

$(document).ready(function(){
    $(".button").click(function () {
       var div= $("#"+this.name);
  div.toggle("slow").siblings().hide("slow");
});
});

HTML：

<h1>
    <div class="arrow"></div>

    <a class="button" name="Show1" href="#">
        <font size="5">QUESTION 1</font>
    </a>
</h1>

<div id="Show1" style="display:none">
    Answer to the question 1
</div>

演示： http://jsfiddle.net/788NK/6/

希望就是你所需要的。

如何将CSS箭头插入html页面并使其可点击

2 个答案: