[JAVA] Implementierung der Kategorie-Pulldown-Funktion

In der endgültigen Aufgabe einer bestimmten Programmierschule habe ich eine Kategorie-Pulldown-Funktion implementiert (eine Funktion, die die Kategorie durch Herunterziehen anzeigt, wenn Sie die Wortkategorie in der Kopfzeile der oberen Seite berühren), und sie auch für meine eigene Ausgabe erklärt. Ich denke

Der Ablauf der Implementierung der Pulldown-Funktion ist sofort wie folgt.

① Berühren Sie die Buchstaben der Kategorie

② In jQuery tritt ein Ereignis auf und der an die Kategorie angehängte Link wird gelesen.

③ Führen Sie eine Ajax-Kommunikation mit diesem Link durch, rufen Sie zuerst die übergeordnete Kategorie aus der Datenbank ab und geben Sie den Wert im JSON-Format zurück.

④ Danach setzen Sie die erfassten Daten einfach wieder in HTML-Form zusammen und fügen sie unter den Zeichen der Kategorie hinzu.

⑤ Die untergeordneten Elemente werden ebenfalls im selben Ablauf wie oben angezeigt und nicht, wenn Sie zu den Enkelelementen wechseln.

Der Quellcode, der dies realisiert hat, ist wie folgt. (Nur der relevante Teil wird extrahiert)

   .contents__bottom
      .header-bottom-left
        .header-bottom-left-category
          = link_to "Kategorie", api_category_path(0) ,class: "category_name", id: "catroy_top_title"
          .header-bottom-left-category-field    

$(function(){
  
  //Generieren Sie Pulldown-HTML
  function buildHTML(data){

    var html = $("<div>").addClass("header-bottom-left-category-field-nav")
    var link

    data.forEach(function(value){
      link = $("<a>", {
        href: "/api/categories/" + value.id ,
        "class":"category_name"
      }).text(value.name)
      link = $("<p>").append(link)

      html.append(link)
    })

    return html
  }

  //Wenn Sie den Titel der Kategorie berühren, wird er erneut von Grund auf angezeigt
  $("#catroy_top_title").mouseenter(function(){
    $(".header-bottom-left-category-field-nav").remove()
  })

   //Wird aktiviert, wenn die Maus losgelassen wird
   $(".header-bottom-left-category").mouseleave(function(){
    $(".header-bottom-left-category-field-nav").remove()
  })

  $(document).on({

    //Startet, wenn der Cursor eingeschaltet ist
    'mouseenter' : function() {

      //Holen Sie sich den Pfad der Kategorie
      var path = $(this).attr("href");

      //Holen Sie sich die untergeordneten Elemente der berührten Kategorie
      $.ajax({
        url: path,
        type: "GET",
        dataType: "json",
        context:this,
        cache: false,
      })
      .done(function(result){
  
        //Zeigen Sie keine Auswahl an, wenn keine untergeordneten Elemente vorhanden sind
        if( result.length != 0 ){
  
          //Fügen Sie unter dem ausgewählten Formular ein neues Formular hinzu
          var html = buildHTML(result)

          //Löschen Sie alle zuvor hinzugefügten Listen
          $(this).parent().parent().nextAll(".header-bottom-left-category-field-nav").remove()
          $(".header-bottom-left-category-field").append(html)

        } 

      })

      //Wird aktiviert, wenn die Maus losgelassen wird
      $(".header-bottom-left-category-field-nav").mouseenter(function(eo){ 
        $(this).find("a").css("color","")
      })

    },'mouseleave' : function(){

       //Wird aktiviert, wenn die Maus losgelassen wird
      $(".header-bottom-left-category-field-nav").mouseleave(function(eo){
        $(eo.fromElement).css("color","orange")
      })
     
    }
  }, ".category_name") 

})

namespace :api do
  resources :categories, only: [:show]
end

class Api::CategoriesController < ApplicationController
 
  def show

    if params[:id] == "0"
      @categories = Category.where(ancestry:nil)
    else
      @categories = Category.find(params[:id]).children
    end

    respond_to do |format|
      format.html{
        if params[:id] == "0"
          redirect_to category_all_items_path
        else
          redirect_to category_all_items_path(category_id: params[:id])
        end
      }
      format.json{
        render json: @categories
      }
    end 

  end

end

(*) Bitte verwenden Sie es, nachdem Sie es für Ihre Umgebung geeignet gemacht haben.