按钮打开并在单击时跳手风琴

时间:2020-04-13 17:41:14

标签: javascript jquery html css

我以前曾经问过这个问题,但是我没有真正想要的东西。

To my old topic

该网站是http://n-p-cain.com/schedule.html

我希望,如果您单击“事件菜单”部分中的“日期”按钮,您将跳至“事件列表”中的该日期并打开手风琴,现在手风琴保持关闭状态(如果我名称为class =“ accordion-link1”或如果您单击“事件菜单”中的按钮,则手风琴将打开,但您不会跳转到它(如果我使用下面的代码)。

     var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      }
    }

    // get list of links by class
    var links = document.getElementsByClassName("accordion-link");

    var linksLength = links.length;
    for(var i=0; i < linksLength; i++){
      links[i].onclick = function(e){
        // preventDefault is probably optional
        // depending on your application
        e.preventDefault();

        // isolate the hash
        var hash = e.target.hash;

        // remove # from hash
        hash = hash.substring(1, hash.length);

        // select by id using hash
        document.getElementById(hash).click();
      }
    }	
	
@charset "utf-8";
/* CSS Document */

 /* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #020725;
    color: #FFF;
	font-weight: bolder;
    cursor: pointer;
    padding: 10px;
	margin: 0px 5px 0px 5px;
    width: 98%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	border-radius: 5px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #132437;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 1px;    
	margin-bottom: 5px;
	background-color: #none;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #FFF;
	font-weight: bolder;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
	   <div class="link_"><a href="schedule.html#0510i" class="accordion-link">2020.05.10</a></div><div class="link1">(日) littleHEARTS.大阪店</div>	
     
     
         
  
  <button class="accordion" id="0510i">5月10日 littleHEARTS.大阪店※時間未定</button>	
<div class="panel"><div class="p">
※詳細発表になるまでは、店舗への問い合わせはご遠慮ください。
	</div></div>

2 个答案:

答案 0 :(得分:0)

我认为,如果您将@Query("SELECT * from country_table ORDER BY CAST(cases AS INTEGER)") fun getAllCountries(): LiveData<List<SingleCountryStats>> 更改为finally, problem is solved. first, as for the process of finding the way. tools of wireshark and postman is much helpful. with those tools, i compare the two way of uploading files with attributes. when uploading with postman i grab the package with wireshark which used as a standard format of uploading. this maybe more helpful than the answer. second, the main code which upload file with some attribute of one transfer goes as followed. static int once(char *URL, bool oldstyle) { CURL *curl; CURLcode res = CURLE_OK; CURLFORMcode formrc; int nFileSize = (0); struct curl_httppost *formpost = NULL; struct curl_httppost *lastptr = NULL; struct WriteThis pooh; struct WriteThis pooh2; struct WriteThis pw; FILE* hFile = fopen(pathfile[0], "rb+"); if (NULL != hFile) { fseek(hFile, 0, SEEK_END); pw.sizeleft = ftell(hFile); fseek(hFile, 0, SEEK_SET); pw.readptr = (char*)malloc(pw.sizeleft + 1); memset(pw.readptr, 0, pw.sizeleft+1); nFileSize = fread(pw.readptr, 1, pw.sizeleft + 1, hFile); fclose(hFile); hFile = NULL; } pooh.readptr = data; pooh.sizeleft = strlen(data); /* Fill in the file upload field */ if(oldstyle) { formrc = curl_formadd(&formpost, &lastptr, CURLFORM_COPYNAME, "file", CURLFORM_STREAM, &pooh, CURLFORM_CONTENTSLENGTH, (long)pooh.sizeleft, CURLFORM_FILENAME, "face0.png",//"postit2.c", CURLFORM_END); } else { /* new style */ formrc = curl_formadd(&formpost, &lastptr, CURLFORM_COPYNAME, "file", CURLFORM_STREAM, &pw, CURLFORM_CONTENTLEN, (curl_off_t)pw.sizeleft, CURLFORM_FILENAME, "face0.png",//"file name 2", CURLFORM_CONTENTTYPE, "image/png", CURLFORM_END); } if(formrc) printf("curl_formadd(1) = %d\n", (int)formrc); /* Now add the same data with another name and make it not look like a file upload but still using the callback */ /* Fill in a submit field too */ formrc = curl_formadd(&formpost, &lastptr, CURLFORM_COPYNAME, "caseDesignId", CURLFORM_COPYCONTENTS, "37", ///CURLFORM_CONTENTTYPE, "text/plain", CURLFORM_END); if(formrc) printf("curl_formadd(4) = %d\n", (int)formrc); curl = curl_easy_init(); if(!curl) { fprintf(stderr, "curl_easy_init() failed\n"); curl_formfree(formpost); curl_global_cleanup(); return TEST_ERR_MAJOR_BAD; } /* First set the URL that is about to receive our POST. */ test_setopt(curl, CURLOPT_URL, URL); /* Now specify we want to POST data */ test_setopt(curl, CURLOPT_POST, 1L); /* Set the expected POST size */ test_setopt(curl, CURLOPT_POSTFIELDSIZE, (long)pooh.sizeleft); /* we want to use our own read function */ test_setopt(curl, CURLOPT_READFUNCTION, read_callback); /* send a multi-part formpost */ test_setopt(curl, CURLOPT_HTTPPOST, formpost); /* get verbose debug output please */ test_setopt(curl, CURLOPT_VERBOSE, 1L); /* include headers in the output */ test_setopt(curl, CURLOPT_HEADER, 1L); /* Perform the request, res will get the return code */ res = curl_easy_perform(curl); test_cleanup: /* always cleanup */ curl_easy_cleanup(curl); /* now cleanup the formpost chain */ curl_formfree(formpost); return res; } ,它将可以正常工作。点击事件对象不会返回我所知道的target.hash。

var hash = e.target.hash

答案 1 :(得分:0)

我怀疑,当您单击日期链接之一时,它会抢在之前被更改。将这部分代码包装在setTimeout()中似乎很适合我。

var linksLength = links.length;
for (var i = 0; i < linksLength; i++) {
    links[i].onclick = function(e) {
        // preventDefault is probably optional
        // depending on your application

        // Delay hash check to make sure it gets current hash
        setTimeout(function() {

            // isolate the hash
            var hash = window.location.hash;

            // remove # from hash
            hash = hash.substring(1, hash.length);

            // select by id using hash
            document.getElementById(hash).click();

        }, 1);
    }
}