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

因此，我使用jqueryminicolors并将其设置为我需要的方式，但有一个问题。加载页面时，已显示颜色选择器。仅当选择输入框时才应显示。设置没有改变任何东西，也没有改变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>  

---

默认情况下隐藏HTML显示：无并使其可见。事件发生时显示。

尝试使用$'.colorpicker'。隐藏以隐藏颜色选择器。.尝试更改Hide:false、Hide:true，我认为这是合乎逻辑的，但没有更改它的显示方式。Hide函数内置，并认为我正确使用了它。插件位于此处，附带文档：。如果我显示：无，则在正确的时候不会显示。你在哪里建议的？多谢。

 $(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();