jquery - 带有 css 和 jquery 的响应式水平滚动菜单-6ren

jquery - 带有 css 和 jquery 的响应式水平滚动菜单

转载作者：行者123 更新时间：2023-11-28 03:17:02

我在使用可滚动导航菜单栏时遇到问题。我做了一些工作并弄清楚了一些，但我无法完成主要部分。

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function() {
  var itemsWidth = 0;
  $('.item').each(function() {
    var itemWidth = $(this).outerWidth();
    itemsWidth += itemWidth;
  });
  //alert(itemsWidth);
  return itemsWidth;
};

var widthOfHidden = function() {
  return (($('.cssmenu').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};

var getLeftPosi = function() {
  //return $('.item:first-child').position().left;
  return $('.list').position().left;
};

var reAdjust = function() {
  if (($('.cssmenu').outerWidth()) < widthOfList()) {
    $('.scroller-right').show();
  } else {
    $('.scroller-right').hide();
    /*
            var leftPos = $('.item:first-child').position().left;
    	    $('.item').animate({left:"-="+leftPos+"px"},'slow');
            */
  }

  if (getLeftPosi() < 0) {
    $('.scroller-left').show();
  } else {
    $('.item').animate({
      left: "-=" + getLeftPosi() + "px"
    }, 'slow');
    $('.scroller-left').hide();
  }
}

reAdjust();

$(window).on('resize', function(e) {
  reAdjust();
});

$('.scroller-right').click(function() {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.list').animate({
    left: "+=" + widthOfHidden() + "px"
  }, 'slow', function() {
    //reAdjust();
  });
});

$('.scroller-left').click(function() {
  //var leftPos = $('.item:first-child').position().left;
  //$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
  //$('.scroller-left').hide();

  $('.scroller-right').fadeIn('slow');
  $('.scroller-left').fadeOut('slow');

  $('.list').animate({
    left: "-=" + getLeftPosi() + "px"
  }, 'slow', function() {

  });

});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #0090c0;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu>ul>li>a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}

#cssmenu>ul>li:hover>a {
  color: #ffffff;
  /* Main menu border- */
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 30px;
}

#cssmenu>ul>li.has-sub>a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
  /* Main menu plus sign */
}

#cssmenu>ul>li.has-sub>a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  /* Main menu plus sign */
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu>ul>li.has-sub:hover>a:before {
  top: 23px;
  height: 0;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  left: auto;
  right: 0;
}

#cssmenu li:hover>ul>li {
  height: 35px;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #ff6030;
}

#cssmenu ul ul li:last-child>a,
#cssmenu ul ul li.last-item>a {
  border-bottom: 0;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
  background-color: #c04830;
}

#cssmenu ul ul li.has-sub>a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}

#cssmenu.align-right ul ul li.has-sub>a:after {
  right: auto;
  left: 11px;
}

#cssmenu ul ul li.has-sub>a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu.align-right ul ul li.has-sub>a:before {
  right: auto;
  left: 14px;
}

#cssmenu ul ul>li.has-sub:hover>a:before {
  top: 17px;
  height: 0;
}

.scroller {
  color: #333333;
  width: 40px;
  text-align: center;
  cursor: pointer;
  display: none;
  padding: 5px;
  margin-top: 20px;
}

.scroller-right {
  float: right;
}

.scroller-left {
  float: left;
}

.list {
  position: absolute;
  left: 0px;
  top: 0px;
  min-width: 3000px;
  margin-left: 12px;
  margin-top: 0px;
}

.item {
  padding: 10px;
  /*float:left;*/
  display: table-cell;
  margin: 1px;
  position: relative;
  text-align: center;
  cursor: grab;
  cursor: -webkit-grab;
  color: #efefef;
  border: 1px dotted #111;
  vertical-align: middle;
}

@media all and (max-width: 768px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center>ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover>ul>li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu>ul>li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover>a,
  #cssmenu ul ul li.active>a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu>ul>li.has-sub>a:after,
  #cssmenu>ul>li.has-sub>a:before,
  #cssmenu ul ul>li.has-sub>a:after,
  #cssmenu ul ul>li.has-sub>a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button">Menu</div>
  <ul class="list">
    <li name="item"><a href="Blank.aspx" target="frmScr"><i class="fa fa-fw fa-
          home"></i>Home</a></li>
    <li name="item">
      <a href="QuickOrderEntry.aspx" target="frmScr">Quick Order</a></li>
    <li name="item">
      <a href="SpreadOrder.aspx" target="frmScr">Spread Order</a></li>
    <li name="item">
      <a href="SwitchOpenMF.aspx" target="frmScr">Switch Order</a></li>
    <li name="item">
      <a href="SpreadViewOrders.aspx" target="frmScr">View Spread Orders</a></li>
    <li name="item">
      <a href="ViewOrder.aspx" target="frmScr">View Order</a></li>
    <li name="item" class="has-sub"><span class="submenu-button"></span>
      <a href="Blank.aspx" rel="SSI0000001" target="frmScr">Systematic Investment</a>
      <ul id="SSI0000001">
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SIP</a>
          <ul>
            <li><a href="frmSIPRegistration.aspx" target="frmScr">SIP Registration</a></li>
            <li><a href="frmrptCancelSIP.aspx" target="frmScr">SIP Cancellation</a></li>
            <li>
              <a href="frmrptSIPRegistrationView.aspx" target="frmScr">SIP Registration 
         Report</a></li>
            <li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP 
         Installment due Report</a></li>
            <li><a href="frmSIPCancellationReport.aspx" target="frmScr">SIP Cancellation Report</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;FileType=IMP_SIP_REG" target="frmScr">SIP Registration Upload</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;FileType=IMP_SIP_CAN" target="frmScr">SIP Cancellation Upload</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SHIFT&amp;FileType=IMP_SIP_TO_XSP" target="frmScr">Shift SIP To XSIP Upload</a></li>
            <li><a href="SIPExceptionsReport.aspx" target="frmScr">SIP Exception Report</a>
            </li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Mandate</a>
          <ul>
            <li><a href="frmMandateRegistrationForm.aspx" target="frmScr">Mandate 
        Registration</a></li>
            <li><a href="frmMandateUploadByMember.aspx" target="frmScr">Mandate Registration Upload</a></li>
            <li><a href="frmMandateSearchByMember.aspx" target="frmScr">Mandate Search</a></li>
            <li><a href="frmMandateDownloadForMember.aspx" target="frmScr">Mandate 
          Download</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button">
           </span><a href="Blank.aspx" target="frmScr">X-SIP / I-SIP</a>
          <ul>
            <li><a href="frmXSIPRegistrationMaster.aspx" target="frmScr">X-SIP / I-SIP 
           Registration</a></li>
            <li><a href="BulkFileUpload.aspx?
          TransType=IMP_XSIP&amp;FileType=IMP_XSIP_REG" target="frmScr">X-SIP / I-SIP 
          Registration Upload</a></li>
            <li><a href="frmRptXSIPRegistrationView.aspx" target="frmScr">X-SIP / I-SIP Registration Report</a></li>
            <li><a href="frmRptXSIPInstallmentDueReport.aspx" target="frmScr">X-SIP / I-SIP 
          Installment due Report</a></li>
            <li><a href="frmrptXSIPBrokerageReportForMembers.aspx" target="frmScr">Brokerage 
          Report</a></li>
            <li><a href="frmrptCancelXSIP.aspx" target="frmScr">X-SIP / I-
           SIP Cancellation</a></li>
            <li><a href="BulkFileUpload.aspx?
       TransType=IMP_XSIP&amp;FileType=IMP_XSIP_CAN" target="frmScr">X-SIP / I-SIP 
       Cancellation Upload</a></li>
            <li><a href="frmXSIPCancellationReport.aspx" target="frmScr">X-SIP / I-SIP Cancellation Report</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SWP</a>
          <ul>
            <li><a href="SWPRegistrationMaster.aspx" target="frmScr">SWP Registration Master</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;FileType=IMP_SWP_REG" target="frmScr">SWP Registration Upload</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;FileType=IMP_SWP_CAN" target="frmScr">SWP Cancellation Upload</a></li>
            <li><a href="SWPCancellationRegn.aspx" target="frmScr">SWP Cancellation</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">STP</a>
          <ul>
            <li><a href="STPRegistrationMaster.aspx" target="frmScr">STP Registration Master</a>
            </li>
            <li><a href="BulkFileUpload.aspx?
           TransType=IMP_STP&amp;FileType=IMP_STP_REG" target="frmScr">STP Registration 
           Upload</a></li>
            <li><a href="BulkFileUpload.aspx?
          TransType=IMP_STP&amp;FileType=IMP_STP_CAN" target="frmScr">STP 
          Cancellation 
           Upload</a></li>
            <li><a href="STPCancellationRegn.aspx" target="frmScr">STP 
           Cancellation</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li name="item" class="has-sub">
      <span class="submenu-button"></span>
      <a href="Blank.aspx" rel="SGB0000001" target="frmScr">SGB</a>
      <ul id="SGB0000001">
        <li><a href="SGBManualEntry.aspx" target="frmScr">SGB Manual Entry</a></li>
        <li><a href="SGBView.aspx" target="frmScr">SGB View</a></li>
        <li><a href="SGBUpload.aspx" target="frmScr">SGB Upload</a></li>
      </ul>
    </li>
    <li name="item" class="has-
            sub"><span class="submenu-button"></span>
      <a href="Blank.aspx" rel="MADM000001" target="frmScr">Admin</a>
      <ul id="MADM000001">
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member M 
            Masters</a>
          <ul>
            <li><a href="MemberBranches.aspx" target="frmScr">Member 
            Branches</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button">
            </span><a href="Blank.aspx" target="frmScr">User Master</a>
          <ul>
            <li><a href="UserMasterDetails.aspx" target="frmScr">User Master Manual</a></li>
            <li><a href="UserMasterUpload.aspx" target="frmScr">User Master Upload</a>
            </li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Client Details</a>
          <ul>
            <li><a href="ClientMasterDetails.aspx" target="frmScr">Client Master</a></li>
            <li><a href="FATCA.aspx" target="frmScr">FATCA Manual Entry</a></li>
            <li><a href="CKYC.aspx" target="frmScr">CKYC</a></li>
          </ul>
        </li>
        <li class="has-sub">
          <span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Admin Reports</a>
          <ul>
            <li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP Installment due 
            Report</a></li>
            <li><a href="UserMasterReport.aspx" target="frmScr">User 
            Master Report</a></li>
            <li><a href="ClientMasterReport.aspx" target="frmScr">Client Master Report</a></li>
            <li><a href="frmClientStatusReport.aspx" target="frmScr">Client Status</a></li>
            <li>
              <a href="RptBranchLoginInfo.aspx" target="frmScr">Branch/Login Info</a></li>
            <li><a href="RptMemberAMCList.aspx" target="frmScr">Member AMC List</a></li>
            <li><a href="frmViewBannedClients.aspx" target="frmScr">View Banned 
           Clients</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button">
           </span><a href="Blank.aspx" target="frmScr">Limits</a>
          <ul>
            <li><a href="BranchDeposits.aspx" target="frmScr">Branch Deposits</a></li>
            <li><a href="DealerDeposits.aspx" target="frmScr">Dealer Deposits</a></li>
            <li><a href="ClientDeposits.aspx" target="frmScr">Client Deposits</a></li>
          </ul>
        </li>
        <li><a href="ClientPaymentRejections.aspx" target="frmScr">Payment 
           Rejections</a></li>
        <li><a href="UploadFATCAFile.aspx" target="frmScr">FATCA 
           Upload</a></li>
        <li><a href="AOFDownload.aspx" target="frmScr">AOF 
           Download</a></li>
        <li><a href="ImageUpload.aspx" target="frmScr">Image 
           Upload</a></li>
        <li><a href="MemberBankDetails.aspx" target="frmScr">Member 
           Bank Details</a></li>
        <li><a href="PANUpload.aspx" target="frmScr">PAN 
           Upload</a></li>
      </ul>
    </li>
    <li name="item" class="has-sub"><span class="submenu-button"></span>
      <a href="Blank.aspx" rel="MMR0000001" target="frmScr">Member Reports</a>
      <ul id="MMR0000001">
        <li><a href="ProvORDReport.aspx" target="frmScr">Provisional Orders</a></li>
        <li><a href="RptProvisionalOrderReportNew.aspx" target="frmScr">New Provisional  
            Orders </a></li>
        <li><a href="OCNReport.aspx" target="frmScr">Bulk OCN 
            Generation</a></li>
        <li><a href="CustodianProvOrderReport.aspx" target="frmScr">Custodian Provision Orders</a></li>
        <li><a href="OrderLogReport.aspx" target="frmScr">Order Log</a></li>
        <li><a href="OrderDetailsSearch.aspx" target="frmScr">Order Status</a></li>
        <li><a href="RptOrderStatusReportNew.aspx" target="frmScr">New Order Status</a>
        </li>
      </ul>
    </li>
    <li name="item" class="has-sub"><span class="submenu-button">
             </span>
      <a href="Blank.aspx" rel="UTI0000001" target="frmScr">Utilities</a>
      <ul id="UTI0000001">
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member 
             Related</a>
          <ul>
            <li><a href="QuickOrderEntry.aspx" target="frmScr">Quick 
             Order</a></li>
            <li><a href="PlaceOrderRedemption.aspx" target="frmScr">Minimum Qty Redemption Order Entry</a></li>
            <li><a href="ViewOrder.aspx" target="frmScr">View Orders</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_MASTER" target="frmScr">Bulk Upload 
             New</a></li>
            <li><a href="FileUpload.aspx" target="frmScr">Bulk Upload</a>
            </li>
            <li><a href="UploadClientDealerMap.aspx" target="frmScr">Upload 
              Client Mapping &amp; Balances</a></li>
            <li><a href="ManualFileUpload.aspx" target="frmScr">Upload Client Deposits</a></li>
            <li><a href="frmUpdateClientDealerMapping.aspx" target="frmScr">Upload Client 
              Dealer Mapping</a></li>
            <li><a href="frmUploadOrderCancellation.aspx" target="frmScr">Upload Order Cancellation</a></li>
            <li><a href="DealerDeposits.aspx" target="frmScr">Dealer Deposits</a></li>
            <li><a href="frmUploadMemberFundsForGateway.aspx" target="frmScr">Upload Member 
               Funds Gateway</a></li>
          </ul>
        </li>
        <li><a href="ChangePassword.aspx" target="frmScr">Change Password</a></li>
      </ul>
    </li>
    <li name="item"><a href="LogOut.aspx" target="_top"><i class="fa fa-sign-out"></i>Log 
               Out</a></li>
  </ul>
</div>

链接:https://www.bootply.com/RDP650rMxv

我需要一个可滚动的导航菜单，左右两侧都有人字形，如果最 Angular 落的菜单有子菜单，它就超过了屏幕分辨率。

最佳答案

如果我做对了，打开子菜单时最后一个菜单会跳到最右边。你可以用这个 css 修复它

ul#UTI0000001 li ul {
    margin-left: -100%;
}

关于jquery - 带有 css 和 jquery 的响应式水平滚动菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45417266/

文章推荐： javascript - 使用 HTML/JS 将输入保存到文本文件？

文章推荐： c++ - 与运算符方法链接时出错

文章推荐： javascript - 刷新页面时计时器会重置 javascript

css - compass 式( ruby )编码错误
我刚刚更新了 Ruby，现在我在尝试启动 compass 时遇到以下错误: Encoding::CompatibilityError on line ["28"] of /usr/local/Cell
c++ - 有哪些小型、快速和轻量级的开源应用程序(µTorrent 式)？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
java - 如何修复 session 式 Java 程序
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
Android 相当于 iOS MobileSubstrate 式 Hook ？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
ios - iOS 中的可折叠/ Accordion 式 View
我正在尝试在我的 iOS 应用程序中开发可折叠/ Accordion 式的功能。这将是您可以在网站上找到的典型 FAQ 类型功能。我想点击标题，然后显示详细信息。因为这是帮助部分，只有几个项目，我认
web-services - 多个依赖资源的 REST 式 URI 设计
我正在尝试设计一个基于 REST 的 Web 服务来与我正在开发的农场动物管理系统进行交互。为了详细说明问题，我收藏了动物属于一个农场。每只动物都有自己的信息——例如姓名、身份证号、品种年龄等。因
javascript - Accordion 式 list 计数器 document.form[]
我有 3 种不同的表单，其中复选框数量不同，每个部分基本上代表一个表单，因此当用户选择该部分中的复选框时，它会显示他们在该部分的总金额中 checkout 了多少 HTML
python - 如何将多个 PDF 页面拼接成一个大 Canvas 式 PDF？
我有一份 32 页的 PDF 版家谱。与其将家谱全部放在一个非常大的 PDF 页面上(这是我想要的)，不如将其格式化为一组 8 个单独的美国信纸大小的页面应该在整个宽度上缝合； 4 行这样就完成了树。
maven - 通过 Maven 自动编译 compass 式 SASS 的最佳方法
指SASS implementation for Java? : 在 Maven 目标编译包中自动编译 compass-style.org 样式表的最佳方法是什么？我不想发送太多的自编译库，也不想通
wpf - 组合框、按钮和 ICommand 绑定(bind)(MVVM 式)
鉴于以下 XAML... 我正在寻找一种绑定(bind) ComboBox、Button 和 Command 的方法，以便当 ComboBox 的值更改时，在 Command 上调用 CanExe
javascript - 在 Ember.js 中实现 Accordion 式 View
在玩具应用程序中，我有一个显示所有帖子标题的“帖子”模板。当您单击每个标题时，我不想直接进入“显示” View ，而是直接内联展开该帖子的其余内容。我考虑过让 postRoute 重用 postsR
twitter-bootstrap - 他们是否提供了任何自定义的 Twitter Bootstrap 式 swagger-ui 实现？
我需要一些使用 Twitter Bootstrap 或其他响应式框架的自定义 Swagger-UI 实现。需要在我的移动设备上使用这样的 UI 测试我的 API，但 swagger-ui 不能很好地扩
javascript - JavaScript 中的 Java 式 OOP 和 jQuery 失败
我正在做一个项目，我真的在尝试编写面向对象的 JavaScript 代码。我刚刚开始阅读Douglas Crockford's JavaScript: The Good Parts我很快开始意识到用
java - 在 java 中使用 Bouncy CaSTLe 进行 block 式 RSA 加密
在 C# 中，我通过执行以下操作来加密文本数据(请注意我正在以 block ( block )的形式加密数据): public string EncryptData(string pu
wcf - 使用 Azure ACS 和 OAuth 2.0 的 Facebook 式 API 访问场景 : how to implement app authorization?
我正在构建一个社交网站，该网站将向全世界公开 REST API (WCF WebAPI)，以便任何开发人员都能够为该网站创建客户端应用程序、将其与其他服务集成等。我想为 API 实现 Faceboo

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 带有 css 和 jquery 的响应式水平滚动菜单