小编Bhu*_*wan的帖子

#header-search {
  width: 200px;
  background: @header-color;
  color: white;
  font-size: 12pt;
  border: 0px solid;
  outline: 0;
  vertical-align: -50%;
}

#header-search::-webkit-input-placeholder {
  color: white;
}

#search-button {
  background: #FFFFFF;
  vertical-align: -50%;
}

.header-view-logo {
  vertical-align: middle;
}

#search-icon {
  fill: white;
}

<button id="search-button" />
<svg id="search-icon" class="search-icon" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 …

$(document).ready(function() {
  var arr;
  $("span").droppable({
    accept: "ul > li",
    classes: {
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      arr = [];
      var dragedElement = ui.draggable.text();
      $(this).addClass("ui-state-highlight");
      $(this).html(dragedElement);
      $('span').each(function() {
        arr.push($(this).text());
      });
      //console.log(JSON.stringify(arr));

      var matched = arr.filter((value) => value == dragedElement);
      //console.log(JSON.stringify(matched));

      $('span').each(function() {
        if ($(this).text() == matched[1]) {
          $(this).addClass('matched');
          //localStorage.setItem('prevValue', $(this).text());
          $('span.matched').text('');
          $(this).removeClass("ui-state-highlight");
          $(this).removeClass('matched');
        }
      });

      $(this).html(dragedElement);
      $(this).addClass("ui-state-highlight");

    }
  }); …

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
  <li role="presentation">Order: </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a>
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another action</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>

h2 {
  margin-top: 0;
}

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
}

#rightside {
  position: absolute;
  right: 0;
  width: 150px;
}

#content {
  min-width: 200px;
  margin: 0 150px 0 200px;
}

<div id="leftside">
  <ul>
    <li><a href="">Left Menu 1</a></li>
    <li><a href="">Left Menu 2</a></li>
  </ul>
</div>
<div id="rightside">
  <ul>
    <li><a href="">Right Item 1</a></li>
    <li><a href="">Right Item 2</a></li>
  </ul>
</div>
<div id="content">
  <h2>Content Title</h2>
  <p>Some paragraph.</p>
  <h2>Another title</h2>
  <p>Some other paragraph with total nonsense. Just plain old text stuffer …

$('.circle').click(function() {
  if ($(this).closest("li").children("ol").length) {
    debugger;
    var clonediv = $(this).closest('li');
    var clndiv = $(this).parentsUntil('li').siblings('ol').children('li:eq(0)');
    var newdiv = clonediv.clone(true, true);
    newdiv.html('<div>' + clonediv.find('div').eq(0).html() + '</div>');
    newdiv.find('.circle').removeClass('circle').addClass('close');
    newdiv.insertAfter(clndiv);
  } else {
    var clonediv = $(this).parentsUntil('li');
    var clndiv = $(this).closest('ol');
    var newdiv = clndiv.clone(true, true);
    newdiv.html('<li><div>' + clonediv.html() + '</div></li>');
    newdiv.find('.circle').removeClass('circle').addClass('close');
    newdiv.insertAfter(clonediv);
  }
});
$('.close').on('click', function() {
  $(this).closest('li').remove();
  console.log('remove');
});
$('li div :header').each(function(index) {
  $("li div :header").get(index).contentEditable = "true";
});

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body …

p {
  font: 10pt Arial, sans-serif;
}

.icon {
  vertical-align: middle;
}

<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>