Question

每当用户点击“表情符号”时，我都会使用jQuery显示/隐藏一些情感代码。

我喜欢做的是在链接上方弹出一个包含表情符号项目的小方框，而不是在其下方打开div（正如我们在常见的WYSIWYG编辑器中看到的那样）

这是我已经拥有的：

file.html

      <a href="#" id="showhide_emobox"> Emoticons </a>
        <div id="emobox">
            <input class="emoticon" type="button" value=":)" />
            <input class="emoticon" type="button" value=":(" />
            <input class="emoticon" type="button" value=":D" />
        </div>

和jQuery：

$('#showhide_emobox').click(function(){
    $('#emobox').toggle();
    });

我对前端开发很新，不知道如何实现这一目标。感谢您的帮助。

Answer 1

这可能需要一些javascript来正确执行此操作（使用位置绝对，重叠框），但作为一个简单的答案，将您的html更改为：

<div>
    <div id="emobox">
        <input class="emoticon" type="button" value=":)" />
        <input class="emoticon" type="button" value=":(" />
        <input class="emoticon" type="button" value=":D" />
    </div>     
    <a href="#" id="showhide_emobox"> Emoticons </a>
</div>

Answer 2

这是基本的

    function active () {
      this.classList.toggle("active")
    }

    var anchor = document.querySelector("a");

    anchor.addEventListener("click", active, false);

    *{ box-sizing: border-box; padding: 0; margin: 0}
    :root{
      padding-top: 150px;
      text-align: center
    }
    a{
      position: relative;
    }
    [id=emobox]{
      position: absolute;
      bottom: 100%;
      left: 0;
      display: none;
      width: 132px;
      margin-left: -50%;
      background: rgb(116, 50, 187);
      padding: 10px;
      border-radius: 4px;
    }

    a.active [id=emobox]{
      display: block;   
    }

<a href="#" id=showhide_emobox>
  <span>Emoticons</span>
  <div id=emobox>
    <input class="emoticon" type="button" value=":)" />
    <input class="emoticon" type="button" value=":(" />
    <input class="emoticon" type="button" value=":D" />
  </div> 
</a>

Answer 3

这个基础是使用包装器作为标签，div使用表情符号，然后使用absolute位置并显示none以获得欲望效果

＆＃13;

$('#showhide_emobox').click(function() {
  $('#emobox').fadeToggle();
  $(this).toggleClass('active');
});

＆＃13;

.em {
  margin-top:100px;
  position:relative;
  height:50px;
  width:150px;
  text-align:center;
}
.em a {
  text-decoration:none;
  color:white;
  display:block;
  background:red;
  font-family:'verdana';
  line-height:50px;
  border-radius:10px;
  transition:all 1s ease;
}
.em a:hover,.em a.active {
  background:orange;
}
#emobox {
  display:none;
  position:absolute;
  bottom:100%;
  height:50px;
  line-height:50px;
  white-space:nowrap;
}
#emobox input {
  displa:inline-block;
  margin:0 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="em">
  <a href="#" id="showhide_emobox"> Emoticons </a>
  <div id="emobox">
    <input class="emoticon" type="button" value=":)" />
    <input class="emoticon" type="button" value=":(" />
    <input class="emoticon" type="button" value=":D" />
  </div>
</div>

＆＃13;

如何在上面的弹出框中链接项目以供选择？

3 个答案: