[JAVA] Mise en œuvre de la fonction déroulante de catégorie

Dans l'affectation finale d'une certaine école de programmation, j'ai implémenté une fonction déroulante de catégorie (une fonction qui affiche la catégorie en tirant vers le bas lorsque vous touchez le mot catégorie dans l'en-tête de la page supérieure), donc je l'ai également expliqué pour ma propre sortie. je pense

Immédiatement, le flux de mise en œuvre de la fonction de déroulement est le suivant.

① Appuyez sur les lettres de la catégorie

② Un événement se produit dans jQuery et le lien attaché à la catégorie est lu.

③ Effectuez une communication Ajax avec ce lien, obtenez d'abord la catégorie parent de la base de données et retournez la valeur au format json.

④ Après cela, rassemblez simplement les données acquises sous forme HTML et ajoutez-les sous les caractères de la catégorie.

⑤ Les éléments enfants sont également affichés dans le même flux que ci-dessus et ne sont pas affichés lorsque vous accédez aux éléments petits-enfants.

Le code source qui a réalisé cela est le suivant. (Seule la partie pertinente est extraite)

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

$(function(){
  
  //Générer du HTML déroulant
  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
  }

  //Si vous touchez le titre de la catégorie, il sera à nouveau affiché à partir de zéro
  $("#catroy_top_title").mouseenter(function(){
    $(".header-bottom-left-category-field-nav").remove()
  })

   //Activé lorsque la souris est relâchée
   $(".header-bottom-left-category").mouseleave(function(){
    $(".header-bottom-left-category-field-nav").remove()
  })

  $(document).on({

    //Démarre lorsque le curseur est activé
    'mouseenter' : function() {

      //Obtenez le chemin de la catégorie
      var path = $(this).attr("href");

      //Récupère les éléments enfants de la catégorie touchée
      $.ajax({
        url: path,
        type: "GET",
        dataType: "json",
        context:this,
        cache: false,
      })
      .done(function(result){
  
        //Ne pas afficher les choix s'il n'y a pas d'éléments enfants
        if( result.length != 0 ){
  
          //Ajouter un nouveau formulaire sous le formulaire sélectionné
          var html = buildHTML(result)

          //Supprimer toute liste ajoutée précédemment
          $(this).parent().parent().nextAll(".header-bottom-left-category-field-nav").remove()
          $(".header-bottom-left-category-field").append(html)

        } 

      })

      //Activé lorsque la souris est relâchée
      $(".header-bottom-left-category-field-nav").mouseenter(function(eo){ 
        $(this).find("a").css("color","")
      })

    },'mouseleave' : function(){

       //Activé lorsque la souris est relâchée
      $(".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

(*) Veuillez l'utiliser après l'avoir adapté à votre environnement.