JQuery 颜色选择器在页面加载时显示

Question

所以我使用 jquery minicolors 并让它按照我需要的方式设置，但有一个问题。页面加载时，颜色选择器已显示。它只应在选择输入框时显示。设置没有改变任何东西，也没有改变 JS 中的任何东西。我在这里做错了什么？我在下面附上代码：

我的html：

<div class="col-sm-2">
  <label data-toggle="tooltip" for="borderColor" title=
  "Enter a Color for the Border (Hexidecimal)"><span class=
  "glyphicon glyphicon-question-sign tip"></span>&nbsp;Border Color</label>

  <div class=
  "minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-right">
  <div class=
  "minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-right minicolors-focus">
    <input class="form-control demo minicolors-input" id="text-field" size="7"
      type="text"> <span class=
      "minicolors-swatch minicolors-sprite"><span class=
      "minicolors-swatch-color" style=
      "background-color: rgb(86, 163, 52);"></span></span>

      <div class="minicolors-panel minicolors-slider-hue" style=
      "display: block; opacity: 1;">
        <div class="minicolors-slider minicolors-sprite">
          <div class="minicolors-picker" style="top: 107.916666666667px;">
          </div>
        </div>

        <div class="minicolors-opacity-slider minicolors-sprite">
          <div class="minicolors-picker"></div>
        </div>

        <div class="minicolors-grid minicolors-sprite" style=
        "background-color: rgb(77, 255, 0);">
          <div class="minicolors-grid-inner"></div>

          <div class="minicolors-picker" style="top: 62px; right: 57px;">
            <div></div>
          </div>
        </div>
      </div>
    </div><span class="minicolors-swatch minicolors-sprite"><span class=
    "minicolors-swatch-color" style=
    "background-color: rgb(112, 194, 74);"></span></span>

    <div class="minicolors-panel minicolors-slider-hue" style=
    "display: none; opacity: .5;">
      <div class="minicolors-slider minicolors-sprite">
        <div class="minicolors-picker" style="top: 107.916666666667px;"></div>
      </div>

      <div class="minicolors-opacity-slider minicolors-sprite">
        <div class="minicolors-picker"></div>
      </div>

      <div class="minicolors-grid minicolors-sprite" style=
      "background-color: rgb(81, 255, 0);">
        <div class="minicolors-grid-inner"></div>

        <div class="minicolors-picker" style="top: 35px; right: 93px;">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</div>  

还有我的 JS：

 $(document).ready(function() {
      $.minicolors.defaults = $.extend($.minicolors.defaults, {
        animationSpeed: 50,
        animationEasing: 'swing',
        // change: null,
        changeDelay: 0,
        control: 'hue',
        defaultValue: '',
        hide: false,
        hideSpeed: 100,
        showSpeed: 100,
        inline: false,
        letterCase: 'uppercase',
        opacity: false,
        position: 'bottom right',
        show: true,
        action: 'click',
        theme: 'bootstrap',
        change: function(hex, opacity) {
          if (!hex) return;
          if (opacity) hex += ', ' + opacity;
          if (typeof console === 'object') {
            console.log(hex);
          }
        },
      });
      $('.minicolors input').minicolors({
        show: function() {
          console.log('Show event triggered!');
        }
      });
      $('.minicolors input').minicolors();

Answer 1

默认隐藏您的 HTML (display:none) 并在事件发生时使其可见 (.show)。